清洁能源有哪些,高清美女吧,唐山教育局
现假设在一个网页中包含有一个Frame子页面，暂且称网页为主页面，Frame为子页面，一般情况下，主页面需要传递消息给子页面，完成对子页面进行控制，典型的应用就是在页面中嵌入广告或嵌入地图应用，广告或地图设计为一个子Frame，它需要接收父页面的控制消息，完成相应的广告画面变换或地图位置的跳转等功能。而这里通常情况下广告页面或地图页面都是由第三方服务商提供的，所以它们和主页面的往往不在同一域名下。这里我们在主页面中访问子Frame中的变量或DOM节点，因为浏览器为了安全对此做了限制，禁止不在同一域名下的Frame相互访问或修改彼此页面内的变量或属性，否则或抛出异常。
为了解决上述问题，HTML5引入了跨文档消息机制(cross-document message)，它允许多个页面相互共享数据，并且不暴露页面内部的DOM节点，这也保证了页面不会因为传递数据而遭到恶意攻击。
实例代码
假设页面A包含一个Frame，该Frame中包含另外一个页面B，它们处在不同的域名下，现在看看页面A和页面B如何实现跨文档的通信。
A页面中JavaScript代码如下
我要评论
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'https://b.example.org/');
B页面的JavaScript代码如下
window.onmessage = function (event) {
if (event.origin == 'https://example.com') { // 可以过滤不需要的消息。
if (event.data == 'Hello world') {
event.source.postMessage('Hello', event.origin);
} else {
console.log(event.data);
}
}};
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
HTML5 HTMLCollection和NodeList的区别详解
网友评论