时间戳

首页 > 解决方案 > 使用谷歌标签管理器将javascript插入特定的div

javascript - 使用谷歌标签管理器将javascript插入特定的div

问题描述

我目前使用谷歌标签实现 iframe 代码 - 使用下面的代码在我的目标页面上自定义 HTML 到特定的 div (id="empty-div")，它工作得很好。谷歌标签管理器（自定义 Html 标签 + 触发器）

自定义 HTML 标签：

<script type="text/javascript">
  jQuery('[id="empty-div"]').html('<iframe src="https://feed.mikle.com/widget/v2/115010/" height="1200px" width="100%" class="fw-iframe" scrolling="no" frameborder="0"></iframe>');
</script>

我想用下面提供的代码替换上面的 iframe 代码。

<script type="text/javascript" src="https://feed.mikle.com/js/fw-loader.js" data-fw-param="115010/"></script>

寻找一个简单的实现

在 Google 跟踪代码管理器中发布时，执行以下操作会导致错误

<script type="text/javascript">
  jQuery('[id="empty-div"]').html('<script type="text/javascript" src="https://feed.mikle.com/js/fw-loader.js" data-fw-param="115010/"></script>');
</script>

标签： javascriptgoogle-tag-manager

解决方案

我查了导致错误的原因。

解析错误。未终止的字符串文字

在 Gtag 中，您正在添加一个添加脚本的脚本。当您上传代码时，它将变成一大行文本。该文本以 开头<script>和结尾</script>。在 HTML 中这一切都会顺利，但由于它是一个string脚本标签，因此会过早关闭，因为</script>中间有另一个标签关闭第一个标签。使其后面的所有代码都无法解析并会引发错误。

所以我建议你使用下面的这个脚本，它将使用 vanilla JavaScript 创建一个新<script>元素，设置正确src并将其放入<div id="empty-div">. 我选择不这样做，jQuery因为我发现更容易解释没有它会发生什么。它对性能或其他 JavaScript 没有任何影响。

我不明白你为什么要<script>在 div 中附加 的原因，因为这不是常见的做法，并且不会对 div 产生任何影响<div id="empty-div">，但我相信你有你的理由。

<script>
  (function () {
    var empty = document.getElementById('empty-div');    // Select empty div
    var script = document.createElement('script');       // Create new script element
    script.setAttribute('data-fw-param', '115010');      // Add the data-fw-param attribute
    script.async = true;                                 // Set async to true. This can improve performance
    script.src = https://feed.mikle.com/js/fw-loader.js; // Set the src to the script
    empty.appendChild(script);                           // Insert the script into the empty div
  }())
</script>

我在这个 SO 线程中找到了问题的解释。请搜索浏览器或工具给您的错误以供将来参考。您将有更多机会找到答案，而且速度更快！

希望这对编码有所帮助和快乐！

推荐阅读