javascript - 如何创建一个小书签以在单独的窗口中显示数据层中的对象

标签 javascript html bookmarklet

我正在尝试创建一个书签来显示数据层中的一些对象,并且我正在尝试在单独的窗口中显示此数据。

这个:

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/

相关文章:

javascript - ES6模块导入给出 "Uncaught SyntaxError: Unexpected identifier"

javascript - Webpack 配置连接 JS

javascript - 在 vue js 中基于 Web 的 html 脚本中导入 js 文件时出现 CORS 错误

php - 将文本框值传递给复选框值

javascript - jQuery Bookmarklet 偶尔工作,原因未知

javascript - 启动时默认打开 Firefox Web 控制台?

javascript - 将预加载器脚本重构为模块化

html - 删除使用 :after pseudo element 嵌入的每个 dt 之前最后一个 dd 的逗号

javascript - bookmarklet:使用 js 将文本插入文本区域?

javascript - 小书签如何处理跨源请求 - 是否需要 cors?