我在页面中有多个iframe.现在我有一个message页面的事件监听器,它从所有iframe获取消息.我有一个解决方法,知道消息来自哪个iframe.
我想分别为每个iframe创建事件监听器.这可能吗？
我被困在这几个小时.
我在http://example.com上有一个a.html,它在http://subdomain.example.com上包含一个带有src到b.html的iframe .a.html有一些JS代码将postMessage发送到iframe.
postMessage的代码很简单:
iframe_window.postMessage('message', iframe_element.src)
但是这样,Chrome会抛出一个错误:
Unable to post message to http://subdomain.example.com. Recipient has origin null.
我也尝试过:
iframe_window.postMessage('message', 'http://subdomain.example.com')
但不要运气!
这是它工作的唯一方式:
iframe_window.postMessage('message', '*')
但我听说'*'不好用.
Firefox中没有问题.
我的主要目标是:
转到我的应用程序,在新选项卡中打开一个链接,在新选项卡中创建一些内容并将事件发送到父主选项卡进行刷新.
我学到了两种技术并没有完全符合我的需要:
如何使用制表符将事件从子节点传递给父节点？我很高兴在父母和孩子的javascript代码的具体示例.它应该适用于跨域(例如:www.mydomain.com和bills.mydomain.com).
有没有我错过的jQuery解决方案？
我正在通过第三方Javascript工作.我对父页面和来自不同来源的子框架之间的通信特别感兴趣.使用window.postMessage,安全地从子节点发送消息并让父节点通过message事件接收它们是微不足道的.
我没有运气朝另一个方向走.我可以得到一些证实这是不能够从父使用postMessage的孩子沟通？如果没有解决这个问题的方法是什么？
有一些关于javascript postMessage事件的事件来源我没有得到的东西.
这是我的主页:
<html>
<body>
<h1>Test</h1>
<h2>Outside</h2>
<iframe src="iframe-include.html"
width="100%" height="100"
sandbox="allow-scripts"></iframe>
<script type="text/javascript">
window.addEventListener('message', function (event) {
console.log(event);
}, false);
</script>
</body>
</html>
还有我的iFrame内容
<html>
<body>
<h3>Inside</h3>
<script type="text/javascript">
var counter = 1,
domain = window.location.protocol + '//' + window.location.host,
send = function () {
window.setTimeout(function () {
console.log('iframe says:', domain);
window.parent.postMessage(counter, domain);
counter += 1;
send();
}, 3000);
};
send();
</script>
</body>
</html>
查看控制台,即使iFrame中的域变量正确,事件对象的origin属性也始终为null.
我的控制台说:
iframe-include.html:11 iframe says: http://127.0.0.1:8181
iframe.html:11 MessageEvent {isTrusted: true, data: 2, origin: "null", lastEventId: …我想知道调用SendMessage(哪些块)和调用PostMessage与WaitForSingleObject一起有什么区别.思考？
经过广泛的研究后看来这应该可行,但在IE8中,letgo函数永远不会被调用...任何帮助？
<script type="text/javascript">
function resizeCrossDomainIframe() {
if (window.addEventListener) {
window.addEventListener('message', letsgo, false);
} else if (window.attachEvent) {
window.attachEvent('onmessage', letsgo);
}
}
function letsgo(event) {
var iframe = document.getElementById('my_iframe');
if (event.origin !== 'http://mysite.com') return; // only accept messages from the specified domain
if (isNaN(event.data)) return; // only accept something which can be parsed as a number
var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
iframe.height = height + "px";
}
</script>
<iframe src='http://mysite.com/products/default.aspx?iframe=true&partnerid=222&site=localhost:62014' frameborder="0" width="100%" …有没有人有一个如何以角度发送和接收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>', …我正在尝试找到一种解决方案，以允许网站通过iframe知道用户使用的URL。
网站1 ：（ http://website.website.com远程网站，只能将javascript和html添加到网页中）
网站2 ：（ https://example.com完全可编辑，php，html，js等）
当前代码：（属于网站2（Example.com）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Website.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body class="body_blank">
<script type="text/javascript">
jq = jQuery.noConflict();
jq(document).ready(function() {
var currentFramePath = '';
var iframe = '<iframe src="{src}" id="#iFrameContainer" style="position:fixed; top:0px; bottom:0px; right:0px; width: 100%; border: none; margin:0; padding:0; overflow: hidden; z-index:999999; height: 100%;">';
var urlFrame = getUrlParameter('currentFrame');
if(urlFrame != null && urlFrame != ''){
console.log("Frame not …我正在开发一个 Chrome 扩展程序以与我自己的 Web 应用程序一起使用，处理加载到iFrame我的应用程序主页上的网页（包括跨域页面）。所以我必须发送消息，包含要处理的页面的 URL，从我的主页面到内容脚本，注入目标iFrame以访问已处理页面的窗口。
我尝试实施这里描述的方法。以下是所有涉及的文件的基本部分：
index.html：
...
<head>
...
<script type="text/javascript" src="base.js"></script>
</head>
<body>
<div>
<input type="text" id="page_url"> <input type="button" id="get_page" value="Get page">
</div>
<iframe id="cross_domain_page" src=""></iframe>
</body>
base.js：
(function() {
"use strict";
function pageProcessing() {
let urlButton = window.document.getElementById("get_page");
urlButton.addEventListener("click", () => {
let url = window.document.getElementById("page_url").value;
window.postMessage(
{
sender: "get_page_button1",
message: url
},
"*"
);
window.postMessage(
{
sender: "get_page_button2",
message: url
},
"*"
);
});
}
window.document.addEventListener('readystatechange', () => …javascript iframe postmessage google-chrome-extension content-script
postmessage ×10
javascript ×8
html5 ×4
iframe ×4
jquery ×2
angularjs ×1
c++ ×1
cross-domain ×1
php ×1
sendmessage ×1
tabs ×1
winapi ×1