我正在尝试创建一个书签来显示数据层中的一些对象,并且我正在尝试在单独的窗口中显示此数据。
这个:
for (var i = 0; i < dataLayer.length; i++){
console.log(dataLayer[i]);
}
可以轻松地以原始方式在控制台上显示数据层,但这不是我想要的。
有人可以帮忙吗?
感谢您的宝贵时间。
最佳答案
创建一个可以接受 MessageEvent 的数据显示页面s 包含您要显示的数据:
<html>
<head>
<script>
window.addEventListener("message", function(event) {
/* for security, check event.origin here and
return if not a safe/recognized URL */
console.log(event.data); // prints message as string
/* dynamically display data on page here */
}, false);
</scrip>
</head>
<body>
<!-- put HTML template for display of data here -->
</body>
</html>
然后在您的书签中,在新窗口中打开数据显示页面并使用 postMessage 向其发送数据。 :
<!-- bookmarking this link creates the bookmarklet -->
<a href='javascript:(function() {
var dataWin = window.open("dataDisplayPageUrl.html", "dataWin");
dataWin.postMessage(dataLayer, "https://mywebsite.com");
})();'>bookmark this</a>
编辑:显然在 IE 中更复杂:Is cross-origin postMessage broken in IE10?
编辑 2:在 Chrome 中对此进行测试,似乎在打开新窗口和可以接收消息之间存在很小的延迟。向小书签添加延迟可以解决该问题:
<!-- bookmarking this link creates the bookmarklet -->
<a href='javascript:(function() {
var dataWin = window.open("dataDisplayPageUrl.html", "dataWin");
window.setTimeout(function() {
dataWin.postMessage(dataLayer, "https://mywebsite.com");
}, 1000);
})();'>bookmark this</a>
关于javascript - 如何创建一个小书签以在单独的窗口中显示数据层中的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29238483/