31

IFrameに読み込まれるページを作成しました。読み込みが完了したら、親ページで関数を呼び出す必要があります。

これは開発中（同じドメイン上）でローカルに機能しますが、現実の世界では完全に異なるドメインでホストされているため、明らかにクロスドメインの問題が発生しています。

安全でないJavaScriptは、URL http：// [...] site2.com/iframeのフレームからURLhttp：//[...]site1.comのフレームにアクセスしようとします。ドメイン、プロトコル、およびポートは一致する必要があります。

私は両方のサーバーを制御しているので、サーバーの一方または両方に、相互に通信できることを示す何かを置くことはできますか？

Iframeページと親ページの両方で「document.domain」を設定する方法を見てきました。

アクセス制御ヘッダーの設定を試しました。

header（'Access-Control-Allow-Origin：*'）;

しかし、どちらも機能しません。

両方のサーバーを制御するときに、完全に異なるドメインの親ウィンドウで関数を呼び出すIframeを許可する方法はありますか？

4

4 に答える 4

87

メッセージ投稿APIを介してフレーム間で通信できます。

たとえば、子フレームで次のように呼び出すことができます。

parent.postMessage("child frame", "*");

そして、親フレームで、メッセージハンドラーを登録します。

window.addEventListener("message", function(event) {
    console.log("Hello from " + event.data);
});
于 2012-10-24T03:47:37.927 に答える
4

ここにはいくつかのオプションがあります：http ：//softwareas.com/cross-domain-communication-with-iframes

于 2012-10-24T03:55:31.517 に答える
2

この問題は、 .htaccess書き換えを使用することで簡単に解決できます。

デモ：

A.サーバー1に「iframeContent/」という名前のディレクトリを作成します。

B.そのディレクトリに、以下を含むindex.phpという名前のファイルを配置します。

<html> 
<head></head> 
<body>

<script type="text/javascript">

    parent.check();

</script>

</body> 
</html>

これはiFrameのコンテンツです。親の関数を呼び出します。

C.サーバー2に「iframeTesting_without-htaccess/」という名前のディレクトリを作成します。

D.そのディレクトリに、以下を含むindex.phpという名前のファイルを配置します。

<html> 
<head></head> 
<body>

<script type="text/javascript">

    function check() { 

       alert("hello");

    }

</script>

<iframe id="sidebnrId" name="sidebnr"
src="PATH-ON-SERVER-1/iframeContent/" frameborder="0"
height="500px" width="600px" scrolling="no"></iframe>

</script>

</body> 
</html>

これは単に親ウィンドウのコンテンツです。iFrameコンテンツが別のサーバーにあることに注意してください（サーバー1にあるため）。

E.Webブラウザを使用して「PATH-ON-SERVER-2/iframeTesting_without-htaccess /」にアクセスします->何も起こりません：iframeはその親の機能にアクセスできません。

問題を解決する方法は次のとおりです

F.サーバー2に「iframeTesting_with-htaccess/」という名前の別のディレクトリを作成します。

G.そのディレクトリに、以下を含むindex.phpという名前のファイルを配置します。

<html> 
<head></head> 
<body>

<script type="text/javascript">

    function check() { 

       alert("hello");

    }

</script>

<iframe id="sidebnrId" name="sidebnr"
src="content-iframe/" frameborder="0"
height="500px" width="600px" scrolling="no"></iframe>

</script>

</body> 
</html>

今回は、iFrameがサーバー1のコンテンツを直接指すのではなく、同じサーバー（サーバー2）にある架空の中間ディレクトリ「content-iframe/」を指します。

H.そのディレクトリに以下を含む.htaccessファイルを配置します。

Options +FollowSymLinks
RewriteEngine On

RewriteBase /

RewriteRule ^content-iframe/$ PATH-ON-SERVER-1/iframeContent/ [R,NC,P]

そのファイルの役割は、架空のディレクトリへのアクセスをSERVER1のコンテンツにリダイレクトすることです。

I.再試行し、Webブラウザで「PATH-ON-SERVER-2 /iframeTesting_with-htaccess/」にアクセスします。今回は動作します。お役に立てば幸いです:-)

于 2013-10-12T10:01:26.623 に答える
1

window.postMessage()最新のブラウザでは、異なるドメインの連携フレーム間で通信するために使用できます。関数を直接呼び出すことはできませんが、2つの間でデータまたはメッセージを渡すことはできます。MDNの説明を参照してください。

于 2012-10-24T03:47:08.510 に答える