如何获取被JavaScript修改前的#greenscreen原始内容或提前执行自定义脚本？

以下是几种简便可行的方案：

1. 让自定义脚本优先执行，提前保存原始内容 #

把你的自定义脚本直接放在#greenscreen元素的紧后方，确保在原有修改脚本之前执行。这样DOM解析到该元素后会立刻保存原始内容，后续原有脚本的修改不会影响已保存的值。

示例代码：

<div id="greenscreen">这里是原始内容</div>
<script>
  // 自定义脚本，优先执行
  const originalContent = document.getElementById('greenscreen').innerHTML;
  // 将值存入全局变量或指定位置即可
  console.log('原始内容:', originalContent);
</script>

<!-- 无法修改的原有脚本 -->
<script>
  if (!navigator.javaEnabled())
    document.getElementById('greenscreen').innerHTML = '<p>Not Supported on this browser';
</script>

如果无法调整脚本位置，也可以把自定义脚本放在<head>中，通过DOMContentLoaded事件的同步监听来提前捕获内容：

document.addEventListener('DOMContentLoaded', function() {
  const originalContent = document.getElementById('greenscreen').innerHTML;
  console.log('原始内容:', originalContent);
}, false);

2. 用MutationObserver监听元素变化，捕获原始内容 #

如果没法调整脚本加载顺序，可以用MutationObserver监听#greenscreen的内容变化，在内容被修改前记录原始值。

示例代码：

// 等待DOM加载完成后初始化监听
document.addEventListener('DOMContentLoaded', function() {
  const greenscreen = document.getElementById('greenscreen');
  const originalContent = greenscreen.innerHTML;

  // 创建观察者实例
  const observer = new MutationObserver((mutations) => {
    console.log('原始内容已保存:', originalContent);
    // 获取到内容后可停止监听
    observer.disconnect();
  });

  // 配置监听规则：监听子节点、文本内容变化
  observer.observe(greenscreen, { childList: true, characterData: true, subtree: true });
});

3. 从页面原始HTML中提取内容 #

如果前两种方法都受限，可以直接从页面的原始HTML字符串中提取#greenscreen的内容：

document.addEventListener('DOMContentLoaded', function() {
  const rawHTML = document.documentElement.outerHTML;
  // 根据元素标签调整正则匹配规则
  const match = rawHTML.match(/<div id="greenscreen">(.*?)<\/div>/s);
  if (match) {
    const originalContent = match[1];
    console.log('原始内容:', originalContent);
  }
});

这种方法需要注意元素的标签类型，若原始HTML结构复杂，正则匹配可能存在误差，仅作为备选方案。

内容的提问来源于stack exchange，提问作者SRobertJames