Question

我遇到了一个小问题。我想在DOM中读取var定义的内部标记。

<script id="foo">
    var x = 1
</script>

我可以通过以下方式访问它：

var script = document.querySelector("#foo");

但那又怎么样？当然

var x_value = script.x

或

var x_value = script.outerHTML.x

不起作用。那么我怎样才能得到x的值呢？

感谢您的帮助！

Answer 1

一旦你在范围内，你就可以从任何你想要的地方访问你的变量......

<script id="foo">
    var x = 1
</script>
<div id="test">
</div>
<script>
document.getElementById("test").innerHTML = x;
</script>

Answer 2

内容脚本在isolated world中运行，因此无法直接访问页面变量。

可以使用正则表达式提取文字数值：

var scriptText = document.getElementById('foo').textContent;
var x = parseFloat(scriptText.match(/var x\s*=\s*(-?(\d*\.)?\d+(e-?\d+)?)|$/)[1]);

任何JSON-ifiable类型can be accessed from a script element的全局页面变量，因为它在页面上下文中运行：

function getPageVariable(name) {
  return new Promise(resolve => {
    window.addEventListener(`${chrome.runtime.id}-variable`, e => {
      resolve(JSON.parse(e.detail));
    }, {once: true});
    var script = document.createElement('script');
    document.documentElement.appendChild(script).text = `
      window.dispatchEvent(new CustomEvent('${chrome.runtime.id}-variable', {
        detail: JSON.stringify(window.${name})
      }))`;
    script.remove();
  });
}

用法：

getPageVariable('x').then(x => {
  // do something with x
});

根据页面CSP，可能需要different method of code injection。

JS在脚本标记中定义变量（Google Extension）

2 个答案: