搜 索
当前位置：
首页
JS
JavaScript 在本页面引入其他页面的方法有多种，以下是一些常见的方式： 1. 使用 `window.open()` 方法打开新页面： ```javascript window.open('otherPage.html', '_blank'); ``` 2. 使用 `
` 元素嵌入其他页面： ```html <iframe</a> </nav> <div class="row clearfix" style="transform: none;"> <div class="main fl"> <article class="post single-post"> <header class="entry-header page-header"> <h6 class="place clearfix"> <span class="nat_tit">正文</span> <div id="font-change" class="single-font fr"> <span id="font-dec"><a href="https://www.lhuier.cn/cc/javascript-zai-ben-ye-mian-yin-ru-qi-ta-ye-mian-de-fang-fa-you-duo-zhong-yi-xia-shi-yi-xie-chang-jia.html" title="减小字体"><i class="fa fa-minus-square-o"></i></a></span> <span id="font-int"><a href="https://www.lhuier.cn/cc/javascript-zai-ben-ye-mian-yin-ru-qi-ta-ye-mian-de-fang-fa-you-duo-zhong-yi-xia-shi-yi-xie-chang-jia.html" title="默认字体"><i class="fa fa-font"></i></a></span> <span id="font-inc"><a href="https://www.lhuier.cn/cc/javascript-zai-ben-ye-mian-yin-ru-qi-ta-ye-mian-de-fang-fa-you-duo-zhong-yi-xia-shi-yi-xie-chang-jia.html" title="增大字体"><i class="fa fa-plus-square-o"></i></a></span> </div> </h6> <h1 class="entry-title page-title">JavaScript 在本页面引入其他页面的方法有多种，以下是一些常见的方式： 1. 使用 `window.open()` 方法打开新页面： ```javascript window.open('otherPage.html', '_blank'); ``` 2. 使用 `<iframe>` 元素嵌入其他页面： ```html <iframe</h1> <div class="contimg"> <a href="" alt=""> <img src="https://www.lhuier.cn/favicon.ico" class="avatar" height="35" width="35"> </a> </div> <div class="entry-meta contpost-meta"> <span class="autlv aut-1"></span> <time datetime="2026-07-06 01:18:16"><span class="separator">/</span>2026-07-06 01:18:16</time> <span class="entry-meta-viewnums"><span class="separator">/</span>0 浏览量</span></div> <div class="postArticle-meta"> <span class="entry-meta-time"><span class="month">07</span><span class="day">06</span></span> </div> <div class="border-theme"></div> </header> <div id="post-category" class="show_text readtext post-category"> <div class="entry-content clearfix"> <p>在网页开发中，有时我们需要在当前页面上引入其他页面的内容或跳转至新页面。JavaScript 提供了多种方法来实现这一功能。以下是几种常见且实用的方法，你可以根据实际需求来选择最合适的方式。</p> <h3>使用 <code>window.open()</code> 方法打开新页面</h3> <p><code>window.open()</code> 方法是 JavaScript 中非常基础的一个函数，用于在新浏览器标签页或新窗口中打开一个新的 URL。下面是如何使用它的一个示例：</p> <pre><code class="language-javascript">// 在当前窗口中打开 newPage.html window.open('otherPage.html', '_blank'); </code></pre> <p>这里，<code>'_blank'</code> 表示在新标签页中打开页面，你可以根据需要改为 <code>'_self'</code>（在当前窗口打开）或其他特定的窗口名。</p> <h3>使用 <code><iframe></code> 元素嵌入其他页面</h3> <p>如果你需要在网页中嵌入另一个网页，<code><iframe></code> 元素是最佳选择。它允许你将另一个页面或应用嵌入到你的页面上，而保持两者之间内容相互独立。下面是使用 <code><iframe></code> 的一个示例：</p> <pre><code class="language-html"><!-- 嵌入 otherPage.html 到当前页面 --> <iframe src="otherPage.html" width="600" height="400"></iframe> </code></pre> <p>在使用 <code><iframe></code> 时，要注意用户代理控制（User-Agent Controls）可能限制页面是否可以被嵌入，特别是出于安全考虑。</p> <h3>使用 AJAX 获取并显示其他页面的内容</h3> <p>如果你想要异步获取另一个页面的内容并将其显示在当前页面上，AJAX 是一个很好的选择。下面是一个使用 AJAX 的基本示例：</p> <pre><code class="language-javascript">// 创建一个 XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); xhr.open('GET', 'otherPage.html', true); // 定义请求完成后的处理函数 xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 将返回的内容设置到页面元素中 document.getElementById('content').innerHTML = xhr.responseText; } }; // 发送请求 xhr.send(); </code></pre> <h3>使用 JavaScript 的 <code>fetch</code> API 获取并显示其他页面的内容</h3> <p><code>fetch</code> 是现代浏览器支持的一个 API，它提供了一种简单的方式来请求资源。以下是如何使用 <code>fetch</code> 来获取和显示其他页面内容的例子：</p> <pre><code class="language-javascript">fetch('otherPage.html') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.text(); }) .then(data => { document.getElementById('content').innerHTML = data; }) .catch(error => console.error('Error:', error)); </code></pre> <p>在实现这些功能时，请考虑用户的体验和页面性能。例如，过度使用 <code><iframe></code> 可能会影响用户界面的整洁性和性能，而频繁的 AJAX 或 <code>fetch</code> 请求可能会对用户体验产生负面影响。因此，选择合适的方法来引入其他页面内容对于构建良好的网站至关重要。</p> </div> <div class="showall">-- 展开阅读全文 --</div> </div> <footer class="entry-footer"> <div class="post-tags"> </div> </footer> </article> <nav class="single-nav"> <div class="entry-page-prev j-lazy"> <a href="https://www.lhuier.cn/cc/kuai-su-xue-hui-js-xian-zhi-dan-chuang-xian-shi-shi-jian-bi-mian-yong-hu-kun-rao.html" title="快速学会JS限制弹窗显示时间，避免用户困扰"> <span>快速学会JS限制弹窗显示时间，避免用户困扰</span> </a> <div class="entry-page-info"> <span class="pull-left">« 上一篇</span><span class="pull-right">2026-07-06</span> </div> </div> <div class="entry-page-next j-lazy" "> <a href="https://www.lhuier.cn/cc/zai-liu-lan-qi-zhuang-tai-lan-zhong-fang-ru-xiao-xi-tong-chang-shi-zhi-xiang-yong-hu-xian-shi-fei-mo.html" title="在浏览器状态栏中放入消息，通常是指向用户显示非模态的通知或消息。以下是一些常见的方法： 1. 使用浏览器的`Notification` API 2. 通过修改浏览器的状态栏DOM元素 3. 使用第三方库或服务 以下是一个基于`Notification` API的示例标题： "如何用JavaScript在浏览器状态栏显示通知消息？"> <span>在浏览器状态栏中放入消息，通常是指向用户显示非模态的通知或消息。以下是一些常见的方法： 1. 使用浏览器的`Notification` API 2. 通过修改浏览器的状态栏DOM元素 3. 使用第三方库或服务 以下是一个基于`Notification` API的示例标题： "如何用JavaScript在浏览器状态栏显示通知消息？</span> </a> <div class="entry-page-info"> <span class="pull-right">下一篇 »</span> <span class="pull-left">2026-07-06</span> </div> </div> </nav> <div class="part-mor"><!--相关文章--> <h3 class="section-title"><span><i class="fa fa-rss-square"></i>相关阅读</span></h3> <ul class="section-cont-tags section-xiangguan pic-box-list clearfix"><!--相关标签--> <li> <a href="https://www.lhuier.cn/cc/kuai-su-xue-hui-js-xian-zhi-dan-chuang-xian-shi-shi-jian-bi-mian-yong-hu-kun-rao.html"> <h3>快速学会JS限制弹窗显示时间，避免用户困扰</h3> <p><b class="datetime">2026-07-06</b><span class="viewd">0 人在看</span></p> </a> </li> <li> <a href="https://www.lhuier.cn/cc/js-qiao-pai-nan-qing-song-jie-jue-shu-zu-zhong-fei-shu-zi-wen-ti-shu-ju-qing-xi-bu-qiu-ren.html"> <h3>JS巧排NaN，轻松解决数组中非数字问题，数据清洗不求人</h3> <p><b class="datetime">2026-07-06</b><span class="viewd">0 人在看</span></p> </a> </li> <li> <a href="https://www.lhuier.cn/cc/ru-he-yong-javascript-shi-xian-an-jian-chu-fa-sui-ji-shu-sheng-cheng-yi-zhao-qing-song-xue-hui-sui-j.html"> <h3>如何用JavaScript实现按键触发随机数生成？一招轻松学会随机数按键技巧</h3> <p><b class="datetime">2026-07-06</b><span class="viewd">0 人在看</span></p> </a> </li> <li> <a href="https://www.lhuier.cn/cc/shou-ji-shang-qing-song-zhi-xing-javascript-jie-mi-shou-ji-duan-js-ying-yong-kai-fa-quan-gong-lve.html"> <h3>手机上轻松执行JavaScript：揭秘手机端JS应用开发全攻略</h3> <p><b class="datetime">2026-07-06</b><span class="viewd">0 人在看</span></p> </a> </li> <li> <a href="https://www.lhuier.cn/cc/javascript-ri-qi-jia-yi-tian-jian-dan-fang-fa-shi-xian-ri-qi-di-zeng.html"> <h3>JavaScript日期加一天：简单方法实现日期递增</h3> <p><b class="datetime">2026-07-06</b><span class="viewd">0 人在看</span></p> </a> </li> <li> <a href="https://www.lhuier.cn/cc/zai-liu-lan-qi-zhuang-tai-lan-zhong-fang-ru-xiao-xi-tong-chang-shi-zhi-xiang-yong-hu-xian-shi-fei-mo.html"> <h3>在浏览器状态栏中放入消息，通常是指向用户显示非模态的通知或消息。以下是一些常见的方法： 1. 使用浏览器的`Notification` API 2. 通过修改浏览器的状态栏DOM元素 3. 使用第三方库或服务 以下是一个基于`Notification` API的示例标题： "如何用JavaScript在浏览器状态栏显示通知消息？</h3> <p><b class="datetime">2026-07-06</b><span class="viewd">0 人在看</span></p> </a> </li> <li> <a href="https://www.lhuier.cn/cc/ru-he-rang-javascript-zai-liu-lan-qi-zhong-yun-xing-kuai-su-shang-shou-shi-zhan-jiao-cheng.html"> <h3>如何让JavaScript在浏览器中运行：快速上手实战教程</h3> <p><b class="datetime">2026-07-06</b><span class="viewd">0 人在看</span></p> </a> </li> <li> <a href="https://www.lhuier.cn/cc/javascript-zhong-ru-he-gei-yuan-su-tian-jia-xiang-ying-shi-jian-shi-yong-bu-zhou-jie-xi.html"> <h3>JavaScript中如何给元素添加响应事件，实用步骤解析</h3> <p><b class="datetime">2026-07-06</b><span class="viewd">0 人在看</span></p> </a> </li> <li> <a href="https://www.lhuier.cn/cc/javascript-tian-jia-xiang-ying-shi-jian-de-fang-fa-ji-chang-jian-an-li-xiang-jie.html"> <h3>JavaScript添加响应事件的方法及常见案例详解</h3> <p><b class="datetime">2026-07-06</b><span class="viewd">0 人在看</span></p> </a> </li> <li> <a href="https://www.lhuier.cn/cc/zhang-wo-js-zai-spark-html-zhong-de-shi-ji-ying-yong-ji-qiao.html"> <h3>掌握JS在Spark HTML中的实际应用技巧</h3> <p><b class="datetime">2026-07-06</b><span class="viewd">0 人在看</span></p> </a> </li> </ul> </div> <p class="copyrighit"> <span> 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权、违法违规、事实不符，请联系我们进行投诉反馈，一经查实，立即处理！ </span><br> <span>转载请注明出处，原文链接：https://www.lhuier.cn/cc/javascript-zai-ben-ye-mian-yin-ru-qi-ta-ye-mian-de-fang-fa-you-duo-zhong-yi-xia-shi-yi-xie-chang-jia.html</span> </p> </div> <aside class="side fr" style="position: relative; overflow: visible; box-sizing: border-box; min-height: 0px;"> <div class="theiaStickySidebar" style="padding-top: 0px; padding-bottom: 0px; position: static; top: 15px; left: 1222.02px;"> <section class="widget" id="divPrevious"> <h3 class="widget-title"><i class="fa fa-divPrevious"></i><span>最新文章</span></h3> <ul class="widget-box divPrevious"> <li> <span class="rankLeft"> <span class="rankNum num-1">1</span> <span class="slash"></span> </span> <span class="text"> <a href="https://www.lhuier.cn/cc/ru-he-zai-javascript-zhong-qing-song-zhao-dao-wang-ye-yuan-su-wei-zhi.html" title="如何在JavaScript中轻松找到网页元素位置">如何在JavaScript中轻松找到网页元素位置</a> </span> </li> <li> <span class="rankLeft"> <span class="rankNum num-2">2</span> <span class="slash"></span> </span> <span class="text"> <a href="https://www.lhuier.cn/cc/javascript-cun-chu-xiang-tong-shu-ju-lei-xing-de-fang-fa-yu-ji-qiao.html" title="JavaScript存储相同数据类型的方法与技巧">JavaScript存储相同数据类型的方法与技巧</a> </span> </li> <li> <span class="rankLeft"> <span class="rankNum num-3">3</span> <span class="slash"></span> </span> <span class="text"> <a href="https://www.lhuier.cn/cc/xue-hui-zai-duo-ge-ye-mian-jian-gong-xiang-javascript-dai-ma-qing-song-shi-xian-kua-ye-fu-yong-ji-qi.html" title="学会在多个页面间共享JavaScript代码：轻松实现跨页复用技巧">学会在多个页面间共享JavaScript代码：轻松实现跨页复用技巧</a> </span> </li> <li> <span class="rankLeft"> <span class="rankNum num-4">4</span> <span class="slash"></span> </span> <span class="text"> <a href="https://www.lhuier.cn/cc/qing-song-zhang-wo-js-duo-xuan-chuan-zhi-ji-qiao-shi-xian-fu-xuan-kuang-pi-liang-chuan-di-zhi-ti-she.html" title="轻松掌握JS多选传值技巧：实现复选框批量传递值，提升数据交互效率">轻松掌握JS多选传值技巧：实现复选框批量传递值，提升数据交互效率</a> </span> </li> <li> <span class="rankLeft"> <span class="rankNum num-5">5</span> <span class="slash"></span> </span> <span class="text"> <a href="https://www.lhuier.cn/cc/xue-hui-js-duo-ci-jia-zai-url-de-zheng-que-fang-fa.html" title="学会JS多次加载URL的正确方法">学会JS多次加载URL的正确方法</a> </span> </li> <li> <span class="rankLeft"> <span class="rankNum num-6">6</span> <span class="slash"></span> </span> <span class="text"> <a href="https://www.lhuier.cn/cc/zhang-wo-javascript-duo-ye-mian-ying-yong-ji-qiao-shi-xian-kua-ye-mian-shu-ju-gong-xiang-yu-jiao-hu.html" title="掌握JavaScript多页面应用技巧，实现跨页面数据共享与交互">掌握JavaScript多页面应用技巧，实现跨页面数据共享与交互</a> </span> </li> <li> <span class="rankLeft"> <span class="rankNum num-7">7</span> <span class="slash"></span> </span> <span class="text"> <a href="https://www.lhuier.cn/cc/javascript-qing-song-shi-xian-duo-he-jia-su-gao-xiao-bing-xing-chu-li-shi-fang-cpu-qian-neng-qing-so.html" title="JavaScript轻松实现多核加速：高效并行处理，释放CPU潜能，轻松应对复杂任务">JavaScript轻松实现多核加速：高效并行处理，释放CPU潜能，轻松应对复杂任务</a> </span> </li> <li> <span class="rankLeft"> <span class="rankNum num-8">8</span> <span class="slash"></span> </span> <span class="text"> <a href="https://www.lhuier.cn/cc/xue-hui-js-duo-xuan-chuan-zhi-qing-song-shi-xian-fu-xuan-kuang-pi-liang-ti-jiao.html" title="学会JS多选传值，轻松实现复选框批量提交">学会JS多选传值，轻松实现复选框批量提交</a> </span> </li> <li> <span class="rankLeft"> <span class="rankNum num-9">9</span> <span class="slash"></span> </span> <span class="text"> <a href="https://www.lhuier.cn/cc/javascript-zhong-fu-zhi-yin-cang-yu-zhi-de-fang-fa-xiang-jie.html" title="JavaScript中复制隐藏域值的方法详解">JavaScript中复制隐藏域值的方法详解</a> </span> </li> <li> <span class="rankLeft"> <span class="rankNum num-10">10</span> <span class="slash"></span> </span> <span class="text"> <a href="https://www.lhuier.cn/cc/javascript-duo-ci-jia-zai-url-de-shi-yong-ji-qiao-ji-an-li-jie-xi.html" title="JavaScript多次加载URL的实用技巧及案例解析">JavaScript多次加载URL的实用技巧及案例解析</a> </span> </li> </ul> </section> <section class="widget wow fadeInDown" id="divPrevious" style="visibility: visible; animation-name: fadeInDown;"> <h3 class="widget-title"><i class="fa fa-divPrevious"></i><span>热门文章</span></h3> <ul class="widget-box divPrevious"> <li> <span class="rankLeft"><span class="rankNum num-1">1</span><span class="slash"></span></span> <span class="text"><a href="https://www.lhuier.cn/cc/zhang-wo-javascript-duo-ye-mian-ying-yong-ji-qiao-shi-xian-kua-ye-mian-shu-ju-gong-xiang-yu-jiao-hu.html" title="掌握JavaScript多页面应用技巧，实现跨页面数据共享与交互">掌握JavaScript多页面应用技巧，实现跨页面数据共享与交互</a></span> </li> <li> <span class="rankLeft"><span class="rankNum num-2">2</span><span class="slash"></span></span> <span class="text"><a href="https://www.lhuier.cn/cc/xue-hui-js-duo-ci-jia-zai-url-de-zheng-que-fang-fa.html" title="学会JS多次加载URL的正确方法">学会JS多次加载URL的正确方法</a></span> </li> <li> <span class="rankLeft"><span class="rankNum num-3">3</span><span class="slash"></span></span> <span class="text"><a href="https://www.lhuier.cn/cc/qing-song-zhang-wo-js-duo-xuan-chuan-zhi-ji-qiao-shi-xian-fu-xuan-kuang-pi-liang-chuan-di-zhi-ti-she.html" title="轻松掌握JS多选传值技巧：实现复选框批量传递值，提升数据交互效率">轻松掌握JS多选传值技巧：实现复选框批量传递值，提升数据交互效率</a></span> </li> <li> <span class="rankLeft"><span class="rankNum num-4">4</span><span class="slash"></span></span> <span class="text"><a href="https://www.lhuier.cn/cc/xue-hui-zai-duo-ge-ye-mian-jian-gong-xiang-javascript-dai-ma-qing-song-shi-xian-kua-ye-fu-yong-ji-qi.html" title="学会在多个页面间共享JavaScript代码：轻松实现跨页复用技巧">学会在多个页面间共享JavaScript代码：轻松实现跨页复用技巧</a></span> </li> <li> <span class="rankLeft"><span class="rankNum num-5">5</span><span class="slash"></span></span> <span class="text"><a href="https://www.lhuier.cn/cc/javascript-cun-chu-xiang-tong-shu-ju-lei-xing-de-fang-fa-yu-ji-qiao.html" title="JavaScript存储相同数据类型的方法与技巧">JavaScript存储相同数据类型的方法与技巧</a></span> </li> <li> <span class="rankLeft"><span class="rankNum num-6">6</span><span class="slash"></span></span> <span class="text"><a href="https://www.lhuier.cn/cc/ru-he-zai-javascript-zhong-qing-song-zhao-dao-wang-ye-yuan-su-wei-zhi.html" title="如何在JavaScript中轻松找到网页元素位置">如何在JavaScript中轻松找到网页元素位置</a></span> </li> </ul> </section> </div> </aside> </div> <script src="https://www.lhuier.cn/static/nobug_blog/js/content.js"></script> </main> <footer class="site-footer footer"> <div class="site-info clearfix"> <div class="container"> <div class="footer-center"> <div class="footer-l-top clearfix"> </div> <span id="publishDate" style="display:none;">2024/11/11</span> <div class="footer-l-btm"> <p class="btm-text"><a class="ico-ico" href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank" title=""><img src="https://www.lhuier.cn/static/nobug_blog/images/icp.png" alt="">备案号：</a> </p> <p class="top-text"> 安全运行<span id="publishDays"></span>天 </p> </div> </div> </div> </div> <div id="backtop" class="backtop"> <div class="bt-box top" style="display: block;"><i class="fa fa-angle-up fa-2x"></i></div> <div class="bt-box bottom"><i class="fa fa-angle-down fa-2x"></i></div> </div> </footer> <script src="https://www.lhuier.cn/static/nobug_blog/js/custom.js"></script> <script src="https://www.lhuier.cn/static/nobug_blog/js/jquery.lazy.js"></script> <script> function siteRun(d) { var nowD = new Date(); return parseInt((nowD.getTime() - Date.parse(d)) / 24 / 60 / 60 / 1000) } var date = document.getElementById("publishDate").textContent; var day = siteRun(date); if(!day){ day = "100"; } document.getElementById("publishDays").innerHTML = day; </script> </body> <script> (function() { var al = document.createElement("script"); al.src = "/api/log?action=views&code=200&id=1994174&path=http%3A%2F%2Fwww.lhuier.cn%2Fcc%2Fjavascript-zai-ben-ye-mian-yin-ru-qi-ta-ye-mian-de-fang-fa-you-duo-zhong-yi-xia-shi-yi-xie-chang-jia.html&type=archive&nonce="+Date.now(); document.body.appendChild(al); })(); </script> </html>
