为什么 html5 postMessage 对我不起作用?

2024-02-29

我使用几行 javascript 来创建一个 iframe 元素,然后我想向它发送一条消息,如下所示:

function loadiframe (callback) {
    var body = document.getElementsByTagName('body')[0];
    var iframe = document.createElement('iframe');
    iframe.id = 'iframe';
    iframe.seamless = 'seamless';
    iframe.src = 'http://localhost:3000/iframe.html';
    body.appendChild(iframe);
    callback();
}

loadiframe(function() {
    cpframe = document.getElementById('iframe').contentWindow;
    cpframe.postMessage('please get this message','http://localhost:3000');
    console.log('posted');
})

然后,里面http://localhost:3000/iframe.html http://localhost:3000/iframe.html(iframe 的来源)是这样的:

<!DOCTYPE html>
<html>
<head>
<title>does not work</title>
<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
  if (event.origin == "http://localhost:3000") {
    document.write(JSON.stringify(event));
    document.write(typeof event);
  }
}
</script>
</head>
<body>
</body>
</html>

但什么也没发生...我什至尝试不使用来源安全检查,但即使这样也没有发生...就像它从未收到消息一样...

我遇到某种异步问题吗?我试图确保 iframe 在 postMessage 消失之前已加载......

EDIT1:另外,控制台上没有显示错误......

EDIT2:我在 Google Chrome 11 和 Firefox 4 中尝试过

先感谢您。


有两个可能的问题:

  1. 你正在呼唤callback在子框架加载之前 - 尝试在load事件或在setTimeout
  2. 我从来没有成功过postMessage与以 '*' 作为原点的任何其他内容一起工作。如果我在其中输入 URL,则会收到安全警告“安全错误:内容位于http://xxx/ http://xxx/可能无法加载数据http://yyy/ http://yyy/”,除了仅在错误控制台(Ctrl + Shift + J)中,而不是在任何其他地方。我怀疑还需要在某个地方设置一些其他东西才能使其工作,但我还没有弄清楚是什么。

这是一个jsfiddle http://jsfiddle.net/robertc/Bh8jB/稍微修改一下代码版本,从我的域加载文档,在 Firefox 和 Chrome 中适用于我。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么 html5 postMessage 对我不起作用? 的相关文章

  • Ionic 2 占位符文本样式

    我正在使用 Ionic 2 rc0 开发一个应用程序 并且整个应用程序中有几个仍然需要样式设置的输入字段
  • PHP函数返回值到html标签

    我想获取函数的返回值并将其显示到特定的id 在我的 Class php 中 我有一个名为 login 的函数 用于验证密码是否正确 不正确
  • html5 输入模式属性在表单之外不起作用?

    这把小提琴 http jsfiddle net 2gaw3 按预期工作 当用户输入无效的国家 地区代码时 它会显示警告 这另一个小提琴 http jsfiddle net y66vH 4 没有form元素 不起作用 看来输入的pattern
  • 如何从顺序键盘导航中删除 Vuetify 附加图标

    在带有 Vuetify 的 Vue js 应用程序中 我有一组用v text field并且其中有一个append icon为了切换文本可见性 如下所示
  • 如何滚动到div内的元素?

    我有一个滚动的div我想在点击它时发生一个事件 它会强制执行此操作div滚动以查看内部元素 我写的JavasCript是这样的 document getElementById chr scrollIntoView true 但这会在滚动时滚
  • 电话号码上未拾取结构化数据

    我在网站上有以下代码片段 当我通过 Google 结构化数据测试工具运行此程序时 它不会获取电话号码 我不确定我哪里错了 div class telephone number p Call Us a href 07749 918 143 a
  • MYSQL 按喜欢/不喜欢和受欢迎程度排序

    我有评论表 其中包括喜欢和不喜欢的内容 现在我在正确的顺序上遇到了问题 实际上 我的系统在顶部显示了最多点赞的评论 我正在 youtube 上寻找类似系统的东西 这意味着 100like 100dislikes 的评论的顺序高于 1 1 我
  • HTML 上传 MAX_FILE_SIZE 似乎不起作用

    我想知道隐藏字段是如何命名的MAX FILE SIZE应该工作吗
  • Tomcat 基本 URL 重定向

    使用tomcat 如何获取请求http www mydomain example重定向到http www mydomain example somethingelse index jsp 我什至没有设法获得要显示的index htmlhtt
  • Prettier vscode 扩展不支持 Django 模板标签 {% tag %}

    Prettier Visual Studio 代码扩展不支持 Django 模板标签 tag 现在我该如何解决这个问题 我是否必须禁用 html 文件的 Prettier 扩展 或者还有其他解决方案吗 github 中的问题 5581 不支
  • 在 HTML 中,

    应该以哪种方式嵌套?

    是否有更正确的嵌套顺序 a and h1 HTML 中的元素 e g a href www example com h1 Example h1 a or h1 a href www example com Example a h1 在 HT

  • (IE 特定)如何确定输入的文本是否比输入元素的宽度长

    这是所有版本 IE 特有的问题 在所有其他浏览器中 当文本溢出时 输入元素的scrollWidth 大于输入元素的clientWidth 有没有办法确定IE中输入字段中的文本超出了输入元素宽度的键 下面是一个检查 clientWidth 与
  • 如何在 的每四个循环项之后添加

    我想在循环中的每第四个数字项之后退出循环 我想创建一个二十人的名单 在每一个tr应该是4个人 So I want to break from the loop after every 4th number of loop My one tr
  • 图表js不显示

    我正在尝试使用 Charts js 创建一个简单的折线图 当我运行下面的代码时 没有出现图表 我究竟做错了什么 我正在关注这个教程http www chartjs org docs latest getting started http w
  • 使用他们的 API 创建一个基本的 MailChimp 注册表单

    我是 MailChimp 的新手 需要一些帮助 通过他们的基本时事通讯注册表单 您只需将一些预先打包的 HTML 嵌入到您的页面中即可 然而 这样做的问题是 单击 提交 会重定向到 MailChimp 页面 我不想重定向到 MailChim
  • 用于自由形式绘图的 javascript 库

    是否有一个 JavaScript 库可以让我在网页上绘图 然后保存该绘图的状态 我想使用鼠标绘制 2D 图像 然后如何存储和加载该绘图 使用 HTML5 画布 绘制图像的简单示例如下 http jsfiddle net ghostoy wT
  • HTML 选择框,从 servlet 中选择数据

    再会 我在 html 中的选择框上遇到问题 我位于简单 CRUD 项目的编辑部分 在用户可以编辑之前 将首先显示所选数据 然后我通过 servlet 在数据库中检索它 现在我希望我检索的数据成为我的选择框中选定的数据 默认 product
  • 保留以下文本的标题

    我正在使用 css 列计数功能将我的部分分成两列 在一个页面上 我在第一列的底部有一个 h3 标题 在下一列的顶部有一个 p 段落 我想保留该段落的前几句话的标题 我可以将其与整个段落一起包装在使用 inline block 样式的 div
  • 如何清除画布中图像上的矩形

    我需要清除画布中图像上绘制的矩形 而不损坏现有图像 我可以绘制小矩形点并将其清除 但问题是 当我清除矩形时 它在图像上仍保留为白色小斑点 有人可以告诉我如何清除图像上的矩形而不损坏现有图像 我使用了以下方法来清除矩形 但没有用 1 cont
  • 插入四个空格而不是制表符

    我试图在按下 Tab 键时插入四个空格 我正在使用以下代码 请参阅spaces t 但是当我将其切换到spaces 当我按 Tab 时只插入一个空格 我还尝试了 function textarea keydown function e va

随机推荐