1

ついにiframeのクロスドメイン機能を完成させました。私が今抱えている問題は、最初のページがかなり長いことです。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');">

誰かがこれを変更する方法について何かアイデアがありますか、そして彼らが私が変更しなければならないものを示すことができるかどうか？

ありがとうございました。

4

2 に答える 2

0

If you are loading into the iframe from a subdomain then this does the trick to avoid the 'Permission denied':

http://madskristensen.net/post/Iframe-cross-domain-JavaScript-calls.aspx

于 2012-12-13T19:51:57.253 に答える
0

何よりもまず、なぜ iframe を使用しているのかを自問する必要があります。これを別の方法 (AJAX!) で実現できる場合は、おそらくそれが最適です。しかし、これが成功した唯一の方法は次のとおりです。

__________________
|A                |
|  ____________   |
|  |B          |  |
|  |           |  |
|  |  |C|      |  |
|  |___________|  |
|_________________|

A には の URL がhttp://foo.comあり、B には の URL があるとしhttp://bar.comます。B のスクリプトは A に影響を与えることはできません。A のスクリプトは B のページに影響を与えることはできません。これはブラウザのセキュリティ プロトコルです。

A が B に対してできる唯一のことは、src に影響を与えて、iframe 内のページを効果的に変更することです。これを有利に利用できます。

B 内に新しい iframe (C) を作成します。C は A と同じサーバーから取得する必要があるため、http://foo.com/iframeheight.html. これを iframe B の下部 ( </body>iframe ページの の前)に配置します。

ifrm = document.createElement("IFRAME"); 
ifrm.setAttribute("src", "http://foo.com/iframeheight.html#" + document.documentElement.scrollHeight); 
ifrm.style.width = 0+"px"; 
ifrm.style.height = 0+"px"; 
document.body.appendChild(ifrm);

A と C は同じ URL を持っているため、ブラウザーはそれらが相互に影響を与えることを許可します。http://foo.com/iframeheight.htmlA に B のサイズを変更するように指示する関数が含まれている必要があります。

window.top.getElementById('my_iframe').height = window.location.hash.substring(1);
于 2012-11-01T14:41:41.410 に答える