CODEWITHSUNDEEP
jqueryiframeiframe-resizer
user3751508
user3751508

Reputation: 63

Iframe-resizer change on iFrame page reloades

Im using the following lib https://iframe-resizer.com/ which enables cross site iFrame's to be resized after source page.

Although I encontered the following problem Im not able to sovle:

  1. When first loading the page the height of the iFrame is right (the whole loaded page is seen in the iframe). But when pressing a link and going to another site which have a larger height then the first (in the iFrame) the iFrame doesn't change and the bottom of the iFrame page is not shown. How come this happen, and how do I solve it?

  2. Is pretty similiar to the above problem. I have set at margin through the "bodyMargin" command. It works fine when the first page load is done but when clicking a link in on the site which is in the iFrame the margins set in "bodyMargin" clears and the site gets to its original. How do i solve this?

Code:

<? php
/*
Template Name: iFrame
*/

get_header(); ?> <script type ="text/javascript"
src="<?php echo get_template_directory_uri(); ?>/js/iframeResizer.min.js"></script> 
<script language="javascript" type="text/javascript">
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

<iframe src="http: //xxxxxxxxx.com/" id="iframe" width="100%" scrolling="no"></iframe>

<script type ="text/javascript">
iFrameResize({
    log: true, // Enable console logging
    enablePublicMethods: true, // Enable methods within iframe hosted page
    resizedCallback: function (messageData) { // Callback fn when resize is received
        $('p#callback').html(
            '<b>Frame ID:</b> ' + messageData.iframe.id +
            ' <b>Height:</b> ' + messageData.height +
            ' <b>Width:</b> ' + messageData.width +
            ' <b>Event type:</b> ' + messageData.type);
    },
    messageCallback: function (messageData) { // Callback fn when message is received
        $('p#callback').html(
            '<b>Frame ID:</b> ' + messageData.iframe.id +
            ' <b>Message:</b> ' + messageData.message);
        alert(messageData.message);
    },
    closedCallback: function (id) { // Callback fn when iFrame is closed
        $('p#callback').html(
            '<b>IFrame (</b>' + id +
            '<b>) removed from page.</b>');
    },
    bodyMargin: '-200px 0 0 -25px',
});
</script>

<?php
get_footer(); 
?>

Upvotes: 1

Views: 2078

Answers (1)

David Bradshaw
David Bradshaw

Reputation: 13077

You need to set the checkOrigin option to false if your iFrame moves domains.

https://iframe-resizer.com/api/parent/#checkorigin

Upvotes: 0

Related Questions