如何在没有 jquery 的情况下将脚本注入文档 <head>答案

【问题标题】：how to inject script into document <head> without jquery如何在没有 jquery 的情况下将脚本注入文档 <head>
【发布时间】：2016-07-14 00:34:02
【问题描述】：

我正在构建一个浏览器扩展程序，我在 <script> 标记内有一个函数，可以修改我需要注入到任何给定网页的 <head> 的 DOM。整个函数是一个字符串（"<script>function content blah blah</script>"）。我正在使用 jquery 来实现这一点：

$('head').prepend(modFunction);

这很好用。出于几个原因，我想删除 jQuery，但是当我尝试创建一个 <script> 元素以使用 vanilla javascript 注入 <head> 时，一切都失败了。到目前为止，我已经尝试了两种方法：

  var headSelector = document.querySelector('head');
  var el = document.createElement('div');
  el.innerHTML = modFunction;
  modFunction = el.firstChild;
  headSelector.insertBefore(modFunction, headSelector.firstChild);

2.document.head.insertAdjacentHTML('afterbegin', modFunction);

两次 javascript 尝试都将具有正确功能的 <script> 标记注入到 <head> 中，但是都没有执行该函数。不知道为什么 jQuery 可以工作，而 vanilla javascript 不能。任何帮助将不胜感激。谢谢

【问题讨论】：

如果你是动态插入脚本，你插入的位置真的无关紧要。你最好还是坚持身体。
从上面的源代码看来，您正在尝试插入 div 而不是 script 标记..
document.getElementsByTagName('script')[0].parentNode.insertBefore(document.createElement('script'), document.getElementsByTagName('script')[0]); 这只有在您有一个现有的脚本标签时才有效，我假设您会这样做，因为您希望它在页面加载时运行
Building a Chrome Extension - Inject code in a page using a Content script的可能重复

标签： javascript jquery html dom google-chrome-extension

【解决方案1】：

你有一些错误。

如果您的modFunction 是一个在其前后包含<script> 标签的字符串，您的代码将不起作用，因为更改div 的innerHTML 将不会执行添加的脚本。
使用insertAdjacentHTML 函数是不必要的，因为modFunction 现在是Text 类型的对象，它将在您的脚本之前插入[object Text] 字符串。
改为使用appendChild 函数将新的脚本元素正确插入头部。

虽然@Jantho1990 说最好从文件中加载脚本，但许多浏览器使用缓存，所以如果您更改脚本源，它不会在浏览器中始终可见。

var scriptSource = '//YourScriptSource.....';
var scriptElem = document.createElement('script');
scriptElem.text = scriptSource;
document.head.appendChild(scriptElem);

【讨论】：

@duskwuff。不，它绝对有效。在投票之前尝试执行它。

【解决方案2】：

SoftwareEngineer171 的回答有效（参见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script 中的文字），但我想指出几点：

您不应该将<div> 元素注入<head>。这是无效的 HTML，通常是不好的做法。
通常，最好将 JavaScript 作为文件存储在服务器上，并使用 src 属性将该文件放到页面上。这不仅更安全，还可以在您需要返回并更新代码时为您节省大量工作。

我会推荐以下解决方案：

你的JavaScriptFile.js

    function content blah blah

内联：

    <script type="text/javascript" src="yourJavaScriptFile.js"></script>

【讨论】：