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

how to inject script into document <head> without jquery

本文关键字：文档 注入 脚本 head jQuery 情况下      更新时间：2023-09-26

我正在构建一个浏览器扩展，我在<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可以工作，而vanilla javascript不能。任何帮助将不胜感激。谢谢

你有几个错误。

  1. 如果modFunction是前后包含<script>标记的字符串，则代码将不起作用，因为更改div的innerHTML不会执行添加的脚本。

  2. 使用insertAdjacentHTML函数是不必要的，因为modFunction现在是类型为 Text 的对象，它将在脚本之前插入[object Text]字符串。

  3. 相反，请使用appendChild函数将新的脚本元素正确插入到head中。

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

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

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

  1. 您不应该将<div>元素注入<head>。这是无效的 HTML，通常是一种不好的做法。

  2. 通常，最好将 JavaScript 作为文件存储在服务器上，并使用 src 属性将该文件放到页面上。这不仅更安全，而且当您需要返回并更新代码时，还可以为您节省大量工作。

我会推荐以下解决方案：

你的JavaScript文件.js

    function content blah blah

内嵌：

    <script type="text/javascript" src="yourJavaScriptFile.js"></script>
相关文章：