Question

如果我有HTML文档，例如：

<!DOCTYPE html>
<head>
    <!-- title, style, etc. -->
</head>
<body>
    <p id="content">Content</p>
    <button onclick="">Change Content</button>
</body>

是否可以链接到不同HTML文档中的脚本（注意文档头部的<script>标记）：

<!DOCTYPE html>
<head>
    <!-- title, style etc. -->
    <script>
        function changeContent() {
            document.getElementById("content").innerHTML = "New Content";
        };
    <script>
</head>
<body>
    <!-- content -->
</body>

这样第一个文档正文中按钮的onclick可以更改为"changeContent()"而不将changeContent()函数放在第一个文档的头部？

修改如果第一份文件在<iframe>范围内怎么办？

Answer 1

您可以将该函数添加到两个html文件中链接的单独JavaScript文件（通过使用带有src属性的脚本标记）。

否则，该功能将不会在当前页面中定义。

Answer 2

你可以做的是，你可以获得页面的内容（带有js的页面），如果它不在你的服务器上。否则你可以加载一个外部的js文件，如：

var imported = document.createElement('script');
imported.src = '/path/to/imported/script';
document.head.appendChild(imported);

取决于文件是否在您的服务器上......

如果它在外部服务器上，您可以尝试获取内容并在<script>之前和</script>之后删除所有内容，但实际上有点脏，但我认为这是可能的。你可以动态创建一个临时脚本，如上面的示例...而不是使用点击...

使用jquery更容易。在这种情况下你还需要使用ajax：）

Answer 3

我测试了以下内容：

HTML-File 1（test_1.html）

<!DOCTYPE html>
<head>
    <!-- title, style, etc. -->
    <script src="test_2.html"></script>
</head>
<body>
    <p id="content">Content</p>
    <button onclick="changeContent()">Change Content</button>
</body>

HTML-File 2（test_2.html）

function changeContent() {
  document.getElementById("content").innerHTML = "New Content";
};

嗯，这不是一个干净的解决方案，但在这种情况下确实有效。

注意：我所做的只是包含.html文件而不是.js文件。并且您只能在此test_2.html文档中使用非HTML语法。

如何链接到其他页面中的脚本？

3 个答案: