云主机测评网在一个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>
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错，值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布！
我在用这类站群服务器、还可以. 用很多年了。