标签: postmessage

我正在尝试使用以下插件在子iframe和其父级之间进行通信:

http://benalman.com/projects/jquery-postmessage-plugin/

我可以按照示例将一条消息从孩子发布到父母而不是其他方式,我真的需要能够以两种方式进行交流.

父代码如下:

var origin = document.location.protocol + '//' + document.location.host,
    src = origin + '/Custom/Ui/Baseline/html/iframe-data-cash.htm#' + encodeURIComponent(document.location.href);

$(function () {

    var $holder = $('#iframe'),
        height,
        $iframe = $('<iframe src="' + src + '" id="data-cash-iframe" width="100%" scrolling="no" allowtransparency="true" seamless="seamless" frameborder="0" marginheight="0" marginwidth="0"></iframe>');

    // append iframe to DOM
    $holder.append($iframe);

});

$(window).load(function () {
    $.postMessage(
        'hello world',
        src,
        parent.document.getElementById('data-cash-iframe').contentWindow
    );
});

孩子的代码如下:

$(function () {

    var parentURL = decodeURIComponent(document.location.hash.replace(/^#/, ''));

    $.receiveMessage(
        function (e) {
            alert(e.data);
        },
        parentURL
    );

});

我真的不明白为什么这不起作用,我迫切需要帮助!

我在iframe中有这个代码:

window.addEventListener('message', function(e){

  if(e.data == 'test')
    console.log(e);

}, false);

这在父文档中:

$('#the_iframe').get(0).contentWindow.postMessage('test', 'http://localhost/');

因此父文档向iframe发送"测试"消息并且它可以正常工作.

但是如何在父文档中定义一个函数,并以某种方式通过postMessage将此函数发送到iframe,iframe将在本地执行该函数？

该函数对文档进行了一些更改,如下所示:

var func = function(){
  $("#some_div").addClass('sss');
}

(#some_div存在于iframe中,而不是父文档中)

我有一些与iframe通信的代码.postMessage(),这意味着它需要添加一个监听器message来接收来自iframe的通信.我正在使用通常的代码:

window.addEventListener('message', processMessage, false);

此代码客户端的页面,有一堆关于它的其他东西上运行:分析,社交按钮,等等,等等,当我加了我注意到console.log的processMessage函数从IFRAME调试通信,这是捡了很多其他来自第三方插件的流量也使用.postMessage.

忽略它们不是问题,因为我正在寻找来自iframe的非常具体的消息,但是我想确保我不会覆盖任何应该从FB脚本中获取这些消息的侦听器等等.我之前遇到过多个window.onresize事件覆盖彼此的问题.这是消息的事件监听器的问题吗？

有没有人有一个如何以角度发送和接收window.postMessage()调用的工作示例？我在github和ngmodules上找到了ng-post-message模块,但是我看一下这段代码并没有给我带来很大的意义,而且文档缺乏一个有效的例子.

编辑:添加我失败的尝试

风景

<div simulation-host element="thing in things"></div>
</div>
<div id="debugConsole">
    <h1>MESSAGE CONSOLE</h1>
    <p id="debugText"></p>
</div>

该模型

$scope.things = 
[
    {
        "location"  :   "Foobar",   
        "resource"  :   $sce.trustAsResourceUrl("http://external.domain:14168/Foo/Bar"), 
        "title"     :   "Launch"    
    }
];

我尝试了一个指令

var simulationFrameHost = angular.module('proxy.directives', []);
simulationFrameHost.config(function ($sceDelegateProvider){
    //URL Regex provided by Microsoft Patterns & Practices.
    $sceDelegateProvider.resourceUrlWhitelist(['^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$','self']);
});

simulationFrameHost.directive('simulationHost', ['$window',function($window) {
    return {
        retrict: 'ACE',
        transclude: 'element',
        replace: true,
        scope: true,
        template: [
            '<ul>',
                '<li>',
                    '<span>',
                        '<a href="#">',
                            '{{thing.location}}',
                        '</a>',
                    '</span>',
                    '<messenger>',
                        '<iframe ng-src="{{thing.resource}}"  />',
                    '</messenger>', …

我计划为我的webapp构建一个模块系统,该系统使用沙盒iframe和postMessage API来安全地运行自定义用户模块.iframe阻止所有DOM访问,并且只应通过我提供的接口进行通信,该接口检查某些权限并提供数据.

系统本身非常简单,并且可以在模块内部使用vanilla js代码,但我希望允许开发人员使用通用框架/库来简化开发,即使用Vue进行数据绑定.

为模块提供此类功能的最佳方法是什么？性能是一个很大的因素,因为几十个这样的模块可能同时运行.让沙盒模块共享库是否安全？

假设我在页面上有几个 iframe，其中一个发送了帖子消息。有没有一种简单的跨浏览器方式来检测哪个人做了并能够回复？

我看到了source消息的属性，event但我无法通过使用它来响应event.source.contentWindow.postMessage：

错误：访问属性“contentWindow”的权限被拒绝

我在浏览我的问题时从SO中找到了这个示例,但我想确切地知道如何在我的场景中使用它.我有一个来自另一个域的iframe,我想检测iframe url何时从另一个域中的一个页面更改为另一个页面.所以,我想的是在打开iframe的第二页时有类似的东西:

<script type="text/javascript">
    $(document).ready(function() {
parent.postMessage("Second Page");
}
</script>

这就是我所需要的,我只需要收到iframe有不同网址的消息.现在在父页面上,我可能会有这样的事情:

<script type="text/javascript">
    $(document).ready(function() {
        $('#frame').load(function () { 
            var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
 var secondPageValue = // I want to get the value from the child page here, how can I do that?
},false);               
        });
    });
</script>

我第一次尝试使用这个postMessage选项,所以每个建议都将非常感激.另外,我是否需要在子端包含一些JS库(如jquery)才能使其工作？

提前谢谢,Laziale

我目前正在制作一个应用程序，需要在两个域之间发送信息（将在页面加载时）。

网站 1： 创建 iFrame > 向网站 2 发送 Postmessage

window.onload =  function () {

iframe = document.createElement("IFRAME");
iframe.setAttribute("src", "WEBSITE 2");
iframe.style.width = "200px";
iframe.style.height = "200px";
iframe.style.border = "none"; //please do not show the iframe JS.
 iframe.id = "lol";
document.body.appendChild(iframe);
document.getElementById("test").innerHTML = "Test!"
window.addEventListener("message", listener, false);

window.setTimeout(sendMessage,100)
}
function sendMessage(e) {
  var receiver = document.getElementById('lol').contentWindow;
receiver.postMessage('Hello Treehouse!', 'WEBSITE 2');
}

function listener(event){
if ( event.origin !== "WEBSITE 2" )
return //website isn't ours bro

  document.getElementById("test").innerHTML = event.data

}

网站 …

我正在尝试从通过 Iframe 加载的网站上的本地存储中获取值。我可以通过 postMessage 向 iframe 内的站点发送消息，但还没有弄清楚如何从 postMessage 调用返回数据。我研究过承诺，但还没弄清楚如何让它发挥作用。

有人有主意吗？

我有一个站点,可以显示在两种状态之一(让我们说正常和调试).在大多数情况下,此站点上的页面将以正常状态显示- 但是在某些情况下,此页面将作为弹出窗口打开,并且需要在调试模式下显示.

我目前正在实现以下目标:

正在加载的页面上的JS侦听带有以下内容的消息:

window.addEventListener("message", enterDebugMode, false);

如果发送了适当的消息,则进入调试模式.

问题:如果用户导航到该弹出窗口中的新页面(在同一站点上),新页面将不知道它应该在调试模式下显示为弹出加载的前一个原始页面收到的消息,但后续页面没有收到该消息.

hacky解决方案:继续重复发送消息(即每1秒)以确保任何新页面接收消息并进入调试模式.如果页面已处于调试模式,则忽略任何后续消息.

不过,我真的不喜欢不断地向页面发送消息,而且如果存在的话,我宁愿更清洁,更有效的解决方案.一个这样的想法是在弹出窗口加载新页面时发送新消息,但遗憾的是我无法注册任何事件处理程序来监听页面加载事件,因为这是一个跨源操作.

我也可以将页面加载消息父母看看它是否应该处于调试模式 - 但我不希望加载的页面启动任何通信 - 第一条消息应该来自父级.