iframe调整高度自动不起作用

Question

Hello i am trying to resize the iframe based on its content but its not working may be becuase of the cross domain

here is the code i am using

<script language="javascript" type="text/javascript">
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>
<iframe src="http://other_domain_name/get?v=07armilCx5A" frameborder="0" scrolling="no" id="iframe" width="100%" height="300px" onload="javascript:resizeIframe(this);"></iframe>

Please help me how this will be resolved to grab a page in iframe from other domain

Answer 1

you can either use the same domains to avoid cross-domain security protection OR use postMessage . This is possible only if you have control of the iframe content...

You'll probably need to adapt this code to your context (iframe ID, etc), but it gives you a working solution : I'm using it on homair.com. When I'm developing on my computer, I've the crossdomain problem, this allows me to avoid this ;)

Don't be afraid, it's quite simple if you study the code in detail !!

On the parent website side :

function adjustIframe(height) {
  if (!height) {
    try {
      height = jQuery("#your-iframe").contents().height();
    }
    catch (e) {
    }
  }

  jQuery("#iframe-wrapper").height(height);
}

function listenIframe() {
  // Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];

  // Now...
  // if "attachEvent", then we need to select "onmessage" as the event.
  // if "addEventListener", then we need to select "message" as the event

  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

  // Listen to message from child IFrame window
  eventer(messageEvent, function (e) {
    if (e.origin == 'http://your_iframe_domain.com') {
      // Action asked from the JS in the iframe
      if (e.data.action == 'resizeWindow') {
        adjustIframe(e.data.height);
      }
    }
  }, false);
}

on the iframe content side :

function adjustParentIframe() {
    // try to call the parent JS function, if the domain is the same
    try {
      setTimeout(parent.adjustIframe, 500);
    }
    // if not => exception catched
    catch (ex) {
      // Using window.parent.postMessage("data", targetOrigin);
      // Send a message to the parent window,
      // which listen to the events, coming from the iframe.
      window.parent.postMessage({
        // action to do on the parent side.
        action: 'resizeWindow',
        // Arguments to send : the height of this page (the iframe content !)
        height: ($(document).height() + 10)
      }, "*");
    }
  }