标签: postmessage

我正在尝试将 react url 作为 iframe 加载到我的 jsp 项目中。

这是我的发送方代码块：

<iframe id="eda" 
               style="display: none;"
                src="http://myhost:3000/"
                width="100%" height="600" border="0" marginwidth="0"
                marginheight="0" scrolling="no">
</iframe>   

****

function loadReactIframe(){
    document.getElementById("eda").contentWindow.postMessage('GET MESSAGE FROM ME', '*');
}

我还尝试了以下方法：

function loadReactIframe(){
      document.getElementById("eda").contentWindow.postMessage(
            'GET MESSAGE FROM ME', 
            'http://myhost', 3000
     );
}

我的接收器（反应）代码块：

componentDidMount() {
     window.addEventListener('load', this.handleLoad);
     alert('componentDidMount')
}

handleLoad(event) {
     alert(event.data);
}

但我无法从事件中获取数据。

我需要在第三方应用程序中模拟按键.假设我有一个需要向Calculator应用程序发送"8"的C#应用​​程序.我不能使用.Net的SendKeys或win32 api的keybd_event,因为它们都要求窗口是最活跃的窗口,这在我的情况下不是这种情况.

这样我就可以调用sendMessage和postMessage.我在过去的三个小时里一直试图获得一些结果,但现在我完全没有希望了.

我有以下内容:

        [DllImport("user32.dll")]
    public static extern int FindWindow(string lpClassName,string lpWindowName);
    [DllImport("user32.dll")]
    public static extern int SendMessage(int hWnd, uint Msg, int wParam, int lParam);

    [return: MarshalAs(UnmanagedType.Bool)]
    [DllImport("user32.dll", SetLastError = true)]
    public static extern bool PostMessage(int hWnd, uint Msg, int wParam, int lParam);

    private void button1_Click(object sender, EventArgs e)
    {
        const int WM_KEYDOWN = 0x100;
        const int WM_SYSCOMMAND = 0x018;
        const int SC_CLOSE = 0x053;

        int WindowToFind = FindWindow(null,"Calculator");

        int result = SendMessage(WindowToFind, WM_SYSCOMMAND, SC_CLOSE, 0);
        Boolean result2 = PostMessage(WindowToFind, …

所以,我在DomainA上有一个页面,并且,使用Chrome扩展程序,我正在注入一些插入指向DomainB的iframe的javascript.

$("body").append("<iframe id='someFrame' src='http://www.domainB.com' width='300' height='800'></iframe>");

我还向DomainA注入了一些javascript,试图获取iframe的contentWindow.我想在它上面使用HTML5 postMessage api.

$("body").append("<a class='myLink'>Post Message</a>");
$(".myLink").click(function(){
    var frameElem = document.getElementById("someFrame"); 
    console.log("frameElem: " + frameElem); //succeeds

var contentWin = frameElem.contentWindow;
console.log("contentWin : " + contentWin); //undefined

//can't do this since contentWin is undefined: 
//contentWin.postMessage("data", "*");
});

但是,contentWindow属性未定义.为什么会这样,我怎么能绕过它呢？如果我将此扩展代码放在网页中,它本身就可以正常工作.

谢谢!

(原谅蹩脚的jquery/javascript)

我正在寻找一种简洁的方法来检测浏览器中的postMessage是否支持发送和接收对象或只是字符串.我认为那里的某个人必须写了一些这样的东西,但我还没有设法找到解决方案.

我正在使用postMessage向/从WebWorker发送数据.虽然检测浏览器是否支持工作人员是直截了当的,但是检测对象是否可以通过postMessage发送已经证明更加困难.

我想写一个简单的检测功能.因此,如果浏览器支持发送使用它的对象.如果只允许字符串,我可以回退到使用JSON.stringify().我可能会将函数分配给dojo/has测试(尽管这与问题/答案无关).

其他人为解决这个问题做了什么？任何建议都会很棒,我是WebWorkers和postMessage的新手.提前致谢.

使用YouTube JavaScript/iFrame API我试图寻求视频的不同时间等.

我已经删除了一个演示:http://jsbin.com/yuliponu

var player;
window.onYouTubeIframeAPIReady = function() {
  var iframe = document.createElement("iframe");
  iframe.width = 400;
  iframe.height = 300;
  iframe.id = "youtubeIframe";
  iframe.src = "https://www.youtube.com/embed/yta1WRuiupk?autoplay=1&enablejsapi=1&origin="+encodeURIComponent(window.location.protocol+"//"+document.domain)+"&playsinline=1&rel=0";
  iframe.setAttribute('frameborder', '0');
  iframe.setAttribute('allowFullScreen', '');
  document.getElementById("video").appendChild(iframe);

  player = new YT.Player('youtubeIframe');
};

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

如果您在控制台中查看,您将看到此错误:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
('https://www.youtube.com') does not match the recipient window's origin 
('http://jsbin.com').

我需要这个来解决开始使用JavaScript API,但我不知道如何解决它.

更新:

我已经重新启动了我的电脑,并且没有发生错误.如果我再次看到错误,我会更新.

我尝试在WebApp和相应的ServiceWorker之间postMessage.serviceWoker已成功注册并正常工作.
不幸的是我发现了一些奇怪的行为:
1.navigator.serviceWorker.controller始终为null.
2.在serviceWorker端,我以这种方式实现了postMessage:

self.addEventListener('message', function (evt) {
console.log('postMessage received', evt);
});

不幸的是,发回原始evt.origin =""和evt.source = null的重要字段不包含所需的值.但我总是收到发送的evt.data.

你知道怎么回帖吗？

非常感谢你!
和我

我正在尝试使用window.postMessage API将子文档（iframe）的简单消息发送回其直接父文档。

在父文档中，我具有以下内容：

window.addEventListener("message", receiveMessage, true);
var receiveMessage = function(event) {
    console.log("Recieved event " + JSON.stringify(event));
}

然后，在iframe中，我有以下内容：

window.parent.postMessage('message', '*');

根据我阅读的所有内容，这应该可以正常工作，并且我的日志消息应该写入控制台。除非它不起作用。

我知道将*用作targetOrigin并不总是安全的，但是在这一点上，我只想整理一下链接。

有什么想法或明显的我想念的东西吗？

我希望能够在 Chrome 开发者工具中中断 postmessage，但似乎没有这样的选项：

是否可以方便地在 postmessage 上中断而无需专门搜索源代码中的行？

编辑：有人建议这个问题与这篇文章重复：Any good debugger for HTML5 Javascript postMessage API?

答案是 Firebug 扩展，但是 Firebug 不再可用（https://blog.getfirebug.com/）

我的 React 项目有一些代码用于监听消息事件。

const onMessage = ({ data }) => {
  console.log('On onMessage has been fired');
}

window.addEventListener('message', onMessage);

有谁知道如何从我的测试套件中触发此事件？我尝试过诸如事件之类的库和许多诸如

test('Recieves message', async () => {
  //Some setup..

  //trigger the addEventListener('message')
  window.parent.postMessage('Hello', '*');  //doesn't work
  window.postMessage('Hello', '*'); //doesn't work
  const ee = new events.EventEmitter();
  ee.emit('Hello') //doesn't work

  //Some further tests...
})

似乎什么都不起作用。请注意，我需要小心这个测试，我不会模拟并覆盖所有addEventListener. 我仍然需要核心代码来完成我想要做的事情。我只需要从我的测试中触发或发出消息事件

有何window.postMessage不同 window.chrome.webview.postMessage？

我在 a 的上下文中使用它WebView2（在 .NET/WPF 应用程序中）。我们正在WebView2中加载第三方网页。该网页会触发window.postMessage我们需要捕获的某些数据。根据文档，WebView2WebMessageReceived在加载的页面触发时引发事件window.chrome.webview.postMessage，这是正确的。另一方面，它似乎并不尊重window.postMessage（没有WebMessageReceived被解雇）。

这两个API是不同的吗？哪一个是标准的（如 HTML5）？window.postMessage由于我无法要求第三方网站更改其代码以使用 .NET，因此如何捕获.NET 应用程序中的事件window.chrome.webview.postMessage？