html调用外部html函数怎么写

在编写HTML代码时，有时候我们希望调用外部的HTML文件中的函数或代码块，这样做可以使得代码更加模块化，易于管理和维护，下面，我将详细介绍如何在HTML中实现这一功能。

使用iframe标签

iframe是一种HTML标签，用于在当前页面中嵌入另一个HTML页面，通过iframe，你可以调用外部的HTML文件，并执行其中的函数。

<!DOCTYPE html>
<html>
<head>
    <title>调用外部HTML函数示例</title>
</head>
<body>
    <!-- 嵌入外部HTML文件 -->
    <iframe src="external.html" id="externalFrame" style="display:none;"></iframe>
    <!-- 调用外部HTML中的函数 -->
    <script>
        function callExternalFunction() {
            var iframe = document.getElementById('externalFrame');
            iframe.contentWindow.externalFunction(); // 调用外部HTML中的函数
        }
    </script>
    <!-- 按钮触发外部函数调用 -->
    <button onclick="callExternalFunction()">调用外部函数</button>
</body>
</html>

在external.html中，你需要定义一个名为externalFunction的函数：

<!DOCTYPE html>
<html>
<head>
    <title>外部HTML文件</title>
</head>
<body>
    <script>
        function externalFunction() {
            alert('外部HTML函数被调用！');
        }
    </script>
</body>
</html>

使用JavaScript的XMLHttpRequest

另一种方法是使用XMLHttpRequest对象来加载外部HTML文件，并执行其中的函数，这种方法不涉及页面的嵌入，而是直接通过JavaScript与外部文件交互。

<!DOCTYPE html>
<html>
<head>
    <title>使用XMLHttpRequest调用外部HTML函数</title>
</head>
<body>
    <!-- 按钮触发外部函数调用 -->
    <button id="callButton">调用外部函数</button>
    <script>
        document.getElementById('callButton').addEventListener('click', function() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'external.html', true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var doc = xhr.responseXML || xhr.responseText;
                    var script = doc.querySelector('script');
                    if (script) {
                        var externalFunction = new Function(script.textContent);
                        externalFunction(); // 调用外部HTML中的函数
                    }
                }
            };
            xhr.send();
        });
    </script>
</body>
</html>

在external.html中，同样需要定义一个名为externalFunction的函数：

<!DOCTYPE html>
<html>
<head>
    <title>外部HTML文件</title>
</head>
<body>
    <script>
        function externalFunction() {
            alert('外部HTML函数被调用！');
        }
    </script>
</body>
</html>