web-dev-qa-db-ja.com

iframe内で親ウィンドウのJavaScript関数を呼び出す方法

これがhttp://my-localhost.com/iframe-test.htmlの私のコードです

<html>
<head><title>Welcome Iframe Test</title></head>
<body>
<iframe src="http://www.my-website.com/index.html" width="500" height="500"></iframe>
<script type="text/javascript">
function alertMyMessage(msg){
    alert(msg);
}
</script>
</body>
</html>

こちらがhttp://www.my-website.com/index.htmlのコードです

<html>
<head></title>Welcome to my Server</title></head>
<body>
<h1>Welcome to My Server</ht>
<a href="javascript:void(0)" title="Click here" onClick="parent.alertMyMessage('Thanks for Helping me')">Click Here</a>
</body>
</html>

「ここをクリック」リンクをクリックすると、次のエラーが発生しました。

Uncaught SecurityError：Origin " http://www.my-website.com "のフレームがOrigin " http://my-localhost.com のフレームにアクセスできないようにブロックしました= "。プロトコル、ドメイン、ポートが一致している必要があります。

この問題を解決するために私を助けてください、またはこのための他の解決策を教えてください。

javascripthtmliframecross-domain
11
rkaartikeyan

別のオリジンのフレームに読み込まれたページのDOMにアクセスすることはできません。これは、セキュリティ上の理由でブロックされています（Webメールサービスを非表示のiframeで開いたときにランダムにアクセスしたWebサイトを想像してください。理由はわかります）。

あなたが来ることができる最も近い、そしてあなたが両方のウェブサイトを制御している場合のみ、 ウェブメッセージングAPI を使用してそれらの間でメッセージを渡すことです。

1つのページで、メッセージを処理する関数を記述し、メッセージイベントリスナーとして追加します。

function receiveMessage(event)
{
  alert(event.data);
}

addEventListener("message", receiveMessage, false);

もう1つは、メッセージを送信します。

parent.postMessage("This is a message", "*");

詳細については、 MDNを参照してください

17
Quentin

PostMessageを使用できます！

親

if (window.addEventListener) {
    window.addEventListener ("message", receive, false);        
}
else {
    if (window.attachEvent) {
        window.attachEvent("onmessage",receive, false);
    }
}

function receive(event){
    var data = event.data;
    if(typeof(window[data.func]) == "function"){
        window[data.func].call(null, data.params[0]);
    }
}

function alertMyMessage(msg){

    alert(msg);
}

IFRAME

function send(){
    window.parent.window.postMessage(
        {'func':'alertMyMessage','params':['Thanks for Helping me']},
        'http://www.my-website.com'
    );
}

参照

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

11
emilianoeloi