在Web开发中，经常遇到需要让一个HTML文档使用另一个页面内容的情况。这种需求可能是整体跳转到新页面，也可能是把别的页面片段嵌入当前视图，或者异步加载后拼装到DOM里。理解浏览器提供的几种基础机制，是写出稳定前端结构的前提。
使用超链接与表单实现整页调用
最基础的调用方式是利用<a>标签的href属性让浏览器发起文档级导航。当用户点击链接时，当前HTML会被完全卸载，浏览器向目标地址请求并渲染新的页面。这种方式逻辑简单，不需要任何脚本参与，适合明确的流程跳转，比如从列表页进入详情页。
除了<a>标签，<form>标签的action属性也能触发页面调用。提交表单后浏览器会根据method决定用GET或POST请求目标页面，并携带用户输入的数据。这种调用会把当前页面替换为服务端返回的HTML，因此不适合需要保留父页面交互状态的场景。在单页应用流行之前，多数多页网站都依赖这两种原生方式完成页面间调用。
需要注意的是，整页调用会导致原有JavaScript运行环境销毁，已绑定的事件与内存变量全部释放。如果目标页面与当前页面同源，浏览器会沿用缓存策略提升速度；若跨域则受Cookie与权限控制。下面的代码展示了一个最简单的跳转调用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调用示例</title>
</head>
<body>
<!-- 点击后浏览器加载另一个页面 -->
<a href="page2.html">前往第二页</a>
<form action="search.html" method="get">
<input type="text" name="q" placeholder="输入关键词">
<button type="submit">搜索</button>
</form>
</body>
</html>
通过iframe嵌入并调用独立页面
如果希望在当前HTML中保留自身内容，同时把另一个页面作为子文档展示，<iframe>是最直接的方案。iframe会创建一个全新的浏览上下文，目标页面在其中独立解析、运行脚本、加载资源。父页面通过src属性指定被调用页面的地址，浏览器自动完成请求与渲染。
使用iframe时，父子页面间的DOM默认相互隔离。同源情况下可以用contentWindow或contentDocument访问内部节点，也能借助postMessage实现跨文档通信；跨域时则只能依赖postMessage并约定消息格式。相较于整页跳转，iframe不会中断父页面的业务，但也带来额外内存开销，且嵌入页的SEO权重通常低于主页面内容。以下示例演示了如何嵌入本地页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父页面</title>
</head>
<body>
<h1>主区域</h1>
<p>下方嵌入另一个页面：</p>
<iframe src="widget.html" width="100%" height="300" frameborder="0"></iframe>
<script>
// 同源时操作iframe内部
var f = document.querySelector('iframe');
f.onload = function() {
var doc = f.contentDocument;
if (doc) {
console.log('嵌入页标题:', doc.title);
}
};
</script>
</body>
</html>
在实际项目中，很多后台系统用iframe承载不同业务模块，避免主框架重复加载。但如果被调用页面体积大、脚本多，会明显拖慢父页面响应。此时可以配合loading懒加载，或改用下面介绍的局部加载方案。
利用JavaScript动态拉取并插入页面片段
现代前端常采用异步方式调用另一个页面：通过fetch或XMLHttpRequest获取目标HTML文本，提取所需节点后插入当前文档。这种做法只搬运页面片段，不引入独立浏览上下文，内存占用低，也方便统一父页面的样式与交互逻辑。
实现时要注意，直接把远程HTML字符串赋给innerHTML不会自动执行其中的<script>标签。若被调用页面含有脚本，需要手动创建script元素并追加，或改由后端提供纯数据接口。下面的代码展示了用fetch调用同域页面并插入指定容器的过程：
// 当前页面中调用另一个页面的片段
fetch('partial.html')
.then(function(res) {
return res.text();
})
.then(function(html) {
var box = document.getElementById('content');
box.innerHTML = html;
// 若片段里包含脚本，需手动触发
var scripts = box.querySelectorAll('script');
scripts.forEach(function(old) {
var s = document.createElement('script');
s.textContent = old.textContent;
document.body.appendChild(s);
});
})
.catch(function(err) {
console.error('调用页面失败:', err);
});
这种动态调用方式对单页应用非常友好，能减少整页刷新带来的闪烁。但它要求开发者自行处理安全过滤，防止远端内容引入XSS风险。如果调用的是跨域页面，还需对方开启CORS头，否则fetch会被浏览器拦截。综合来看，整页跳转、iframe嵌入与异步片段加载分别覆盖了不同隔离级别与性能诉求，按业务边界选用即可。