使用Javascript将跨域交给iframe的父窗口

我已经写了一个记录工具，用于从网页中抓取图像。它加载本身作为当前窗口内的iFrame使用JavaScript的书签：使用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 += "&amp;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。

来源

2013-03-23 Danack

你不能把按钮放在iframe的外面吗？ – Xymostech 2013-03-23 01:17:31

我可以但我更愿意将它放在iFrame中，以便它位于其他按钮的旁边。 – Danack 2013-03-23 01:20:32

我有一个项目，我正在做类似于Xymostech的想法，我把按钮放在iframe的外面，然后操纵按钮的css使它出现在iframe上。这对我来说是最快的解决方案。 – markashworth 2013-06-08 10:11:16

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-23 01:30:46

嗨特拉维斯，谢谢。我确实已经有postMessage。我忘记做的事情是将事件监听器添加到父框架。这就是为什么我从父母到孩子的帖子都在工作，而不是相反。 – Danack 2013-03-23 22:34:07

使用Javascript将跨域交给iframe的父窗口

回答

相关问题