1

私はメモを取り、Webページから画像を取得するためのツールを作成しました。javascriptブックマークを使用して、現在のウィンドウ内にiFrameとしてロードされます。

javascript:(function(){   _my_script=document.createElement('SCRIPT');   _my_script.type='text/javascript';   _my_script.src='http://basereality.test/js/bookmarklet.js?rand='+(Math.random());   document.getElementsByTagName('head')[0].appendChild(_my_script); })();

ユーザーが閉じるボタンをクリックしたときに、親ウィンドウからiFrameを削除して、ツールを閉じることができるようにしたいと思います。

これを行う最も簡単な方法は何ですか-それ自体の中でiFrameを閉じることは可能ですか？

クロスドメインメッセージ投稿を使用してみました。親ウィンドウから子iFrameへのクロスドメイン投稿が機能していますが、iFrameから親ウィンドウへの投稿が機能しません。

私がこれまでに持っているコード（おそらく問題が含まれています）は次のとおりです。

動的にロードされたJavascriptを介した親ウィンドウで：

function    addiFrame(domain){
    var iframe_url = "http://" + domain + "/bookmarklet";

    var div = document.createElement("div");
    div.id = bookmarkletID;

    var str = "";

    iframe_url += "?description=" + encodeURIComponent(document.title);
    iframe_url += "&URL=" + encodeURIComponent(document.URL);

    str += "<div>";
    str += "<iframe frameborder='0' class='toolPanelPopup dragTarget' style='z-index: 1000'  name='bookmarklet_iframe' id='bookmarklet_iframe' src='" + iframe_url + "' width='550px' height='255px' style='textalign:right; backgroundColor: white;' />";

    str += "</div>";

    div.innerHTML = str;

    document.body.insertBefore(div, document.body.firstChild);
}


function jQueryLoadedCallback(){

    jQueryAlias = jQuery.noConflict();
    jQueryAlias('#' + bookmarkletID).bind('basereality.removeFrame', removeFrame);
}

function removeFrame(){
    alert("Calling remove frame");
    $("#" + bookmarkletID).remove();
}

iFrameで、iFrameを閉じるためのボタンは次のように呼び出します。

function removeFrame(){
    var params = {};
    params.message = 'basereality.removeFrame';
    parent.postMessage(params, "*");
}

iFrameでremoveFrameを呼び出しても、親ウィンドウでremoveFrameが呼び出されることはありません。

では、実際にiFrameを削除するにはどうすればよいですか。

4

1 に答える 1

9

postMessageはおそらくあなたが探しているものです。Mozillaはこれを文書化しており、かなりまともなクロスブラウザサポートを備えています。

https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

この概念に関するライブラリも作成しました。少しデバッグが必要な場合がありますが、githubで入手できます：https：//github.com/tsharp/OF.Core.js/blob/master/js/of/window.messaging。 js

ここから、すべての着信要求を処理するために親ウィンドウにイベントリスナーが必要になります...これにより、親コンテキストからiframeが削除されます。メッセージ受信イベントを登録する例を次に示します。

function registerWindowHandler() {
    if (typeof window.addEventListener !== 'undefined') {
    window.addEventListener('message', receiveMessage, false);
    } else {
    // Support for ie8
    window.attachEvent('onmessage', receiveMessage);
    }
}
于 2013-03-23T01:30:46.330 に答える