在开始 <body> 标记之后立即放置一个脚本
Posted
技术标签:
【中文标题】在开始 <body> 标记之后立即放置一个脚本【英文标题】：Place a script immediately after the opening <body> tag 【发布时间】：2013-01-24 01:11:28 【问题描述】：我想放置一个谷歌标签管理器脚本，根据谷歌标签文档，该脚本应该放在开始标签之后。
由于我们无法更改源代码，我们必须使用以下代码 sn-p 附加脚本。
<script type="text/javascript">
(function ()
var url = "path/to/js/file";
var gtm = document.createElement('script');
gtm.type = 'text/javascript';
gtm.async = true;
gtm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + url;
var s = document.getElementsByTagName('body')[0];
s.parentNode.insertBefore(gtm, s);
)();
</script>
几乎和谷歌分析脚本sn-p一样。现在脚本被附加在 body 标记之前。我不确定使用 jQuery 方法 insertAfter 是否是正确的方法，或者是否有更好的方法！
感谢您的热心帮助。
【问题讨论】：
我觉得还可以。您可以使用此代码。 您确定要将gtm.src 设为https:///path/to/js/file 还是http://www./path/to/js/file？
也许你应该只使用<body><script src="/path/to/js/file"></script>...</body>。
@zerkms：问题是：如何在开始 标记之后立即附加脚本？
@AaditMShah：谢谢，我已经修改了sn-p。
【参考方案1】：
实际上，您的代码在head 和body 标记之间插入了script。改用这个：
var s = document.body.firstChild;
s.parentNode.insertBefore(gtm, s);
【讨论】：
非常感谢。我认为这是可行的，但我在控制台中收到一条错误消息。未捕获的类型错误：无法读取未定义的属性“firstElementChild”！ 时机？head 部分有这个 IIFE 脚本吗？如果是这样，请稍等……没有lastChild，它是如何工作的？在您的评论中，您说的是“is appended right before the body tag”。你也改变了其他东西......
.getElementsByTagName('body')[0]?只需使用.body。
非常感谢提姆。我选择了您的答案，因为它可以在不将自己限制在 body 标记之后的元素 ID 的情况下工作。【参考方案2】：
您可以为此使用Node.insertBefore：
var body = document.getElementsByTagName("body")[0];
body.insertBefore(gtm, body.firstChild);
即使正文标签没有firstChild，这也有效。
【讨论】：
非常感谢，当我尝试它时也会返回错误。未捕获的类型错误：无法读取未定义的属性“firstChild” 假设您使用的是 jQuery，您可以将脚本加载器脚本包装在$(function());【参考方案3】：
此 Q 不再相关（2021 年 12 月），因为 GTM 更改了跟踪代码管理器的设置和安装：
在“新”设置中，您应该：
将<script>代码sn-p 放在网页html 输出的<head>中，最好靠近开始<head>标记作为 可能，但在任何 dataLayer 声明之下。 **另外 - 将<noscript>代码 sn-p 紧跟在 HTML 输出中的标记之后。
https://support.google.com/tagmanager/answer/6103696
关于<noscript> 没有任何 Javascript 代码添加<noscript> 的意义（noscript 仅在 JavaScript 关闭时在浏览器中工作）。
【讨论】：
【参考方案4】：我想你可以试试这个 - appendChild
document.getElementsByTagName("body")[0].appendChild(gtm);
【讨论】：
这会在结束body 标签之前添加 script： (.【参考方案5】：
试试这个：
var script = 'The script content here'; // Add your JS as a string,
var url = 'path/to/js/file'; // Or link to the file.
var scriptNode = document.createElement('script'); // Create a script Element
scriptnode.setAttribute('type', "text/javascript"); // Set the Element's `type` attribute.
// Either:
scriptNode.appendChild(document.createTextNode(script)); // Add the text to the script Element.
// Or:
scriptNode.setAttribute('src', url); // Link to the script
// Place the script Element before the first child of the body.
document.body.insertBefore(scriptNode , document.body.firstChild);
所以，基本上，使用insertBefore
【讨论】：
【参考方案6】：如果你使用 jQuery，你可以使用.prepend()。
(function ()
var url = "path/to/js/file";
var gtm = document.createElement('script');
gtm.type = 'text/javascript';
gtm.async = true;
gtm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + url;
$('body').prepend(gtm);
)();
【讨论】：
jQuery 在附加script 标签时使用了一些怪癖。它可能不会注入脚本标签本身。
@SalmanA 感谢您的提醒。刚刚测试了一下，好像有点不一致。【参考方案7】：
你能不能在你的body标签里有一个元素作为第一个元素，并在它之前附加脚本。使用yourFirstElementIdfromBodyTag.before(here is your appended code goes) ..
举例
<body>
<your first element> like <input type="hidden" id="hidA" />
//rest code goes here
</body>
现在按照建议使用 $('#hidA').before('the script code') 。我确信它会在 <body> 之后附加脚本。
【讨论】：
以上是关于在开始 <body> 标记之后立即放置一个脚本的主要内容，如果未能解决你的问题，请参考以下文章