Question

我有一段代码：

<!doctype html>
<html lang="en">
<head>
    <script src="main.js"></script>
</head>
<body>
<script src="custom.js?token={{token}}"></script>

</body>
</html>

main.js是我的脚本，它用body标签{{token}}替换了Query提供的值。

window.onload = function() {
    var link_sid = query.get('link_sid');
    document.body.innerHTML = document.body.innerHTML.replace(/{{token}}/g, util.protocol() + '://c.' + util.env() + util.domain() + '/' + link_sid);
}

custom.js?token={{token}}是我无法更改的用户内容。

问题是用户JS根据我的{{token}}值放置了一些HTML代码。因此，在打开页面后，所有{{token}}都会更改，但自定义JS cos令牌内部不会在加载JS后更改。

如何在custom.js查询中替换{{token}}之前将其填充？它需要用纯JS完成。

[已更新1]

我无法移动body中的任何内容，也无法更改。正文是用户提供的内容。

Answer 1

您需要动态加载脚本。这是一种通过创建脚本标签并将其附加到页面上的方法

<!doctype html>
<html lang="en">
<head>
    <script>
        var script = document.createElement("script")
        script.type = "text/javascript";
        script.src = "custom.js?token=" + "your_token"
        document.getElementsByTagName("head")[0].appendChild(script);
    </script>
</head>
<body>


</body>
</html>

Answer 2

我可以看到您将{{token}}传递给custom.js的方式是一种骇人听闻的方式。我可以建议您更改应采用的方式：

由于main.js是您的脚本，因此您可以尝试将{{token}}分配给全局值，例如：

在main.js内部：

    window.TOKEN = util.protocol() + '://c.' + util.env() + util.domain() + '/' + link_sid`;

在html中将保持不变，除了不需要添加{{token}}字符串：
然后在custom.js内，您可以使用window.TOKEN对其进行任何操作。

如果window.TOKEN是异步求值的，则还需要main.js中的回调函数来告诉custom.js令牌何时准备就绪，然后就可以开始使用它，例如： / p>

当令牌必须异步时：

在main.js中：

    var TOKEN = util.protocol() + '://c.' + util.env() + util.domain() + '/' + link_sid`;
    typeof window.tokenReady === 'function' && window.tokenReady(token); // make sure it's a function before calling it

在custom.js中：

    window.tokenReady = function (token) {
      // Do something with token
    }

在其他脚本加载之前替换文本

2 个答案: