web-dev-qa-db-ja.com

子Iframeが別のドメインから親ウィンドウの関数を呼び出すことを許可する

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

（同じドメインで）開発中にローカルで動作しますが、実世界では完全に異なるドメインでホストされているため、明らかにクロスドメインの問題に遭遇しています：

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

両方のサーバーを制御しているので、一方または両方のサーバーに、お互いに通信を許可されていると言うものを置くことは可能ですか？

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

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

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

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

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

javascriptiframecross-domain
25
Brett

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

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

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

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

window.addEventListener("message", function(event) {
    console.log("Hello from " + event.data);
});
78
dfreeman

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

4
iivel

この問題は。htaccess rewriteを使用して簡単に解決できます。

デモ：

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

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

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

<script type="text/javascript">

    parent.check();

</script>

</body> 
</html>

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

C. SERVER 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はその親の機能にアクセスできません。

ここでIS問題を解決する方法

F. SERVER 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はSERVER 1のコンテンツを直接指すのではなく、同じサーバー（SERVER 2）にある中間の仮想ディレクトリ「content-iframe /」を指します。

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

Options +FollowSymLinks
RewriteEngine On

RewriteBase /

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

そのファイルの役割は、仮想ディレクトリへのアクセスをサーバー1のコンテンツにリダイレクトすることです。

I.もう一度お試しください。Webブラウザで「PATH-ON-SERVER-2/iframeTesting_with-htaccess /」にアクセスします。今回は動作します。私はそれが助けたことを願っています:-)

2
Gilbou

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

1
jfriend00