1

高さに応じて（埋め込まれているドメインとは別のドメインでホストされている）のサイズを変更する方法を解決することを目的とする別のStackoverflowの回答（cross-domain iframe resizer? ）を理解しようとしています。iframe誰かが以下の私の質問に答えることができるかどうか疑問に思っています.

ソリューション：

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 を含む親ページ (およびその高さを知りたい):

<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. この行では、「id」をのと、「other_domain」を iframe がホストされているドメイン名とfunction resizeCrossDomainIframe(id, other_domain) {交換することは想定されていませんよね? これらは、後で関数を呼び出すときに指定するパラメーターにすぎません。idiframe

  3. onloadタグ内で使用する代わりにiframe、iframe を埋め込むページに読み込まれる jQuery で同等のものを作成しました。

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

  4. 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

それは正しく見えますか？

4

1 に答える 1

2

私は似たようなことをする必要があり、この例がより単純に見えることがわかりました: postmessage を使用して iframe の親ドキュメントを更新する

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
  }
}
于 2014-01-24T18:46:31.630 に答える