HTML页面跳转到另一个界面，URL不变 - 使用<iframe>实现

<p>您可以使用以下代码将页面跳转到up.html，同时保持URL不变：</p>
<pre><code class="language-html">&lt;iframe src=&quot;up.html&quot; style=&quot;display:none;&quot;&gt;&lt;/iframe&gt;
</code></pre>
<p>将此代码放置在需要进行跳转的位置，当点击该位置时，页面将加载up.html页面，并且URL仍然显示为http://127.0.0.1/。</p>
<p><strong>使用场景：</strong></p>
<ul>
<li>当需要隐藏页面跳转过程时，例如，使用Ajax加载内容后，将页面跳转到新内容所在的页面，但不需要用户看到地址栏的变化。</li>
<li>当需要保持页面URL一致性时，例如，用户使用书签或分享链接访问页面，需要保证页面内容和URL一致性。</li>
</ul>
<p><strong>注意：</strong></p>
<ul>
<li>使用<iframe>标签会增加页面加载时间，因为需要加载两个页面。</li>
<li>在某些浏览器中，<iframe>标签可能会被浏览器阻止，导致页面无法跳转。</li>
<li>如果您需要在跳转后进行一些操作，例如关闭弹窗，需要在up.html页面中进行处理。</li>
</ul>
<p><strong>其他方法：</strong></p>
<p>除了使用<iframe>标签，还可以使用以下方法实现页面跳转：</p>
<ul>
<li>使用JavaScript的<code>window.location.href</code>方法进行页面跳转。</li>
<li>使用Meta标签进行页面跳转。</li>
<li>使用服务器端脚本进行页面跳转。</li>
</ul>
<p><strong>选择合适的方案：</strong></p>
<p>根据您的具体需求，选择合适的方案实现页面跳转。</p>
<p><strong>代码示例：</strong></p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;页面跳转&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;button onclick=&quot;window.location.href='up.html';&quot;&gt;跳转到up.html&lt;/button&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p><strong>结论：</strong></p>
<p>使用<iframe>标签可以实现页面跳转并保持URL不变，但需要考虑其性能和兼容性问题。您也可以选择其他方法实现页面跳转，例如使用JavaScript或服务器端脚本。</p>
<p><strong>相关链接：</strong></p>
<ul>
<li><a href="https://www.w3schools.com/tags/tag_iframe.asp">HTML <iframe> 标签</a></li>
<li><a href="https://www.w3schools.com/jsref/prop_loc_href.asp">JavaScript window.location.href</a></li>
<li><a href="https://www.w3schools.com/tags/tag_meta.asp">Meta 标签</a></li>
</ul>