如何将脚本注入文档 <head> 没有jQuery

Question

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

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

而且效果很好。 我出于某些原因想要删除jQuery，但是当我尝试创建一个<script>元素以使用普通JavaScript注入<head> ，一切都会失败。 到目前为止，我已经尝试了两种方法：

1。

  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可以正常工作，而普通javascript却不能正常工作。 任何帮助将不胜感激。 谢谢

Answer 1

你有一些错误。

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

尽管@ Jantho1990表示最好从文件中加载脚本，但是许多浏览器都使用缓存，因此，如果您更改脚本源，则它在浏览器中将始终不可见。

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

Answer 2

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

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

我建议以下解决方案：

yourJavaScriptFile.js

    function content blah blah

排队：

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

如何将脚本注入文档 <head> 没有jQuery

问题描述

2 个解决方案

解决方案1
4 已采纳

解决方案2
-2 2016-07-14 00:51:45

如何将脚本注入文档 <head> 没有jQuery

问题描述

2 个解决方案

解决方案1 4 已采纳

解决方案2 -2 2016-07-14 00:51:45

解决方案1
4 已采纳

解决方案2
-2 2016-07-14 00:51:45