当前位置：首页 > 行业动态 > 正文

如何在一个body中加载不同的html

admin
行业动态
2024-04-05
3589

在一个body中加载不同的HTML，可以通过多种方法实现，以下是一些常见的方法：

1、使用iframe元素

iframe是一个内联框架，可以在一个HTML文档中嵌入另一个HTML文档，通过将不同的HTML页面嵌入到不同的iframe中，可以实现在一个body中加载不同的HTML。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>在同一个body中加载不同的HTML</title>
</head>
<body>
    <iframe src="page1.html" width="50%" height="50%"></iframe>
    <iframe src="page2.html" width="50%" height="50%"></iframe>
</body>
</html>

2、使用JavaScript动态加载HTML内容

可以使用JavaScript的document.write()方法或者jQuery的$().load()方法来动态加载HTML内容，这种方法需要在服务器端支持动态生成HTML内容。

示例代码（使用JavaScript）：

<!DOCTYPE html>
<html>
<head>
    <title>在同一个body中加载不同的HTML</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <script>
        function loadPage(url) {
            $('#content').load(url);
        }
    </script>
</head>
<body>
    <button onclick="loadPage('page1.html')">加载页面1</button>
    <button onclick="loadPage('page2.html')">加载页面2</button>
    <div id="content"></div>
</body>
</html>

示例代码（使用jQuery）：

<!DOCTYPE html>
<html>
<head>
    <title>在同一个body中加载不同的HTML</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').on('click', function() {
                var url = $(this).data('url');
                $('#content').load(url);
            });
        });
    </script>
</head>
<body>
    <button dataurl="page1.html">加载页面1</button>
    <button dataurl="page2.html">加载页面2</button>
    <div id="content"></div>
</body>
</html>

3、使用AJAX请求获取HTML内容并插入到body中

可以使用JavaScript的XMLHttpRequest对象或者jQuery的$.ajax()方法来发送AJAX请求，获取HTML内容，并将其插入到body中，这种方法需要在服务器端支持返回HTML内容的API接口。

示例代码（使用JavaScript）：

<!DOCTYPE html>
<html>
<head>
    <title>在同一个body中加载不同的HTML</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <script>
        function loadPage(url) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById('content').innerHTML = xhr.responseText;
                }
            };
            xhr.open('GET', url, true);
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="loadPage('page1.html')">加载页面1</button>
    <button onclick="loadPage('page2.html')">加载页面2</button>
    <div id="content"></div>
</body>
</html>

示例代码（使用jQuery）：

<!DOCTYPE html>
<html>
<head>
    <title>在同一个body中加载不同的HTML</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').on('click', function() {
                var url = $(this).data('url');
                $.ajax({url: url, success: function(data) {$('#content').html(data);}});
            });
        });
    </script>
</head>
<body>
    <button dataurl="page1.html">加载页面1</button>
    <button dataurl="page2.html">加载页面2</button>
    <div id="content"></div>
</body>
</html>