Javascript->使用postMessage方法调整iframe的大小 [英] Javascript --> iframe resizing using postMessage method

查看:150
本文介绍了Javascript->使用postMessage方法调整iframe的大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试理解另一个Stackoverflow答案(跨域iframe调整器?),旨在解决如何根据其高度调整iframe(位于与其嵌入的域不同的域中)的大小.想知道是否有人可以在下面回答我的问题.

I'm trying to understand another Stackoverflow answer (cross-domain iframe resizer?) that purports to solve how to resize an iframe (hosted on a domain separate from the domain it's embedded in) according to its height. Wondering if anyone could answer my questions below.

解决方案:

iframe:

 <!DOCTYPE html>
<head>
</head>
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">
  <h3>Got post?</h3>
  <p>Lots of stuff here which will be inside the iframe.</p>
</body>
</html>

包含iframe(并希望知道其高度)的父页面:

The parent page which contains the iframe (and would like to know its height):

<script type="text/javascript">
   function resizeCrossDomainIframe(id, other_domain) {
    var iframe = document.getElementById(id);
    window.addEventListener('message', function(event) {
      if (event.origin !== other_domain) return; // only accept messages from the specified domain
      if (isNaN(event.data)) return; // only accept something which can be parsed as a number
      var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
      iframe.height = height + "px";
    }, false);
  }
</script>

<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe"     onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">
</iframe>

我的问题:

  1. http://target.domain.com 指的是iframe所在的域
    嵌入其中吧?不是iframe托管的域?
  2. function resizeCrossDomainIframe(id, other_domain) {行中,我不应该将"id"与iframeid和"other_domain"与iframe托管的域名互换,对吗?它们只是我稍后在调用函数时指定的参数.

  1. http://target.domain.com refers to the domain the iframe is
    embedded within, right? NOT the domain that the iframe is hosted on?
  2. In the function resizeCrossDomainIframe(id, other_domain) { line, I'm not supposed to interchange "id" with the id of the iframe and "other_domain" with the domain name that the iframe is hosted on, right? They're only parameters that I specify later when I call the function.

不是在iframe标记中使用onload,而是在jQuery中编写了等效的代码,该jQuery在嵌入iframe的页面上加载:

Instead of using onload within the iframe tag, I wrote the equivalent in jQuery, which loads on the page that embeds the iframe:

$('#petition-embed').load(function() { resizeCrossDomainIframe('petition-embed','http://target.domain.com'); });

$('#petition-embed').load(function() { resizeCrossDomainIframe('petition-embed','http://target.domain.com'); });

我在return周围添加了括号:

I added brackets around return:

if (event.origin !== other_domain) {return;} // only accept messages from the specified domain if (isNaN(event.data)) {return;} // only accept something which can be parsed as a number

if (event.origin !== other_domain) {return;} // only accept messages from the specified domain if (isNaN(event.data)) {return;} // only accept something which can be parsed as a number

看起来不错吗?

推荐答案

我需要做类似的事情,发现这个看起来更简单的示例:

I needed to do something similar, and found this example that seems simpler: using postmessage to refresh iframe's parent document

这就是我在iframe中得到的结果:

Here is what I ended up with in the iframe:

window.onload = function() {
  window.parent.postMessage(document.body.scrollHeight, 'http://targetdomain.com');
}

在接收方的父母中:

window.addEventListener('message', receiveMessage, false);

function receiveMessage(evt){
  if (evt.origin === 'http://sendingdomain.com') {
    console.log("got message: "+evt.data);
    //Set the height on your iframe here
  }
}

这篇关于Javascript->使用postMessage方法调整iframe的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆