2012-10-24 6 views
24

IFrameで読み込まれたページを作成し、ロードが完了した後に親ページで関数を呼び出す必要があります。子IFrameが親ウィンドウ上の別のドメインから関数を呼び出すことを許可する

それは(同じドメインの)開発でローカルに動作しますが、現実の世界では、そのように明らかに私は、クロスドメインの問題、すなわちに実行しています、完全に別のドメインでホストされている:

アクセスに安全でないJavaScriptの試みURL http:// [...] site2.com/iframeを持つフレームからURL http:// [...] site1.comを持つフレーム。ドメイン、プロトコル、ポートは一致する必要があります。

私は両方のサーバーを制御しているので、お互いに話すことが許可されているサーバーの一方または両方に何かを置くことは可能ですか?

私はiframeページと親ページの両方で "document.domain"を設定しました。

ヘッダ(「アクセス制御 - 許可起源:*」)Iアクセス制御ヘッダを設定して実験を行った

しかし、どちらも問題ありません。

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

+0

[投稿](http://stackoverflow.com/questions/5477324/iframe-calling-parent-javascript)は非常に簡単な解決法を提供します。 – craned

答えて

70

フレーム間では、message posting API経由で通信できます。 、

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

そして、親フレームにメッセージハンドラを登録します:たとえば、あなたの子供にあなたが呼び出すフレーム

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

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

2

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

デモ:

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

<script type="text/javascript"> 

    parent.check(); 

</script> 

</body> 
</html> 

A.そのディレクトリ内のサーバ1

B.置き含む名前はindex.phpファイルの "iframeContent /" という名前のディレクトリを作成します。

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

C.は、そのディレクトリ内のサーバ2

D.置きインデックスという名前のファイルに「iframeTesting_without-htaccessを/」という名前のディレクトリを作成します。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コンテンツが別のサーバーにあることに注意してください(SERVER 1のため)。

E. Webブラウザで「PATH-ON-SERVER-2/iframeTesting_without-htaccess /」にアクセスする - 何も起こらない:iframeは親の機能にアクセスできません。 HERE

はF.は、そのディレクトリ内のサーバ2

G.場所のindex.phpというファイルの "iframeTesting_with-htaccessを/" という名前の別のディレクトリを作成します。あなたは問題に

を解決することができる方法です含む:

<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が詐欺にもはや直接指していません同じサーバー(サーバー2)にある中間の架空のディレクトリ "content-iframe /"に接続する必要があります。含む

H.置き、そのディレクトリにある.htaccessファイル:

Options +FollowSymLinks 
RewriteEngine On 

RewriteBase/

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

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

私はもう一度、ウェブブラウザで "PATH-ON-SERVER-2/iframeTesting_with-htaccess /"にアクセスしてください。今回はうまくいくでしょう。私はそれが助けてくれることを願っています:-)

関連する問題