HTML页面跳转URL不变（http）

新加入的第一篇（http） HTML页面跳转URL不变有次公司提出这个需求之后，我在网上找了蛮久的，看到通常解决的方法都是加入一个标签，但其还是属于页面

2023-11-24 技术

新加入的第一篇（http）

HTML页面跳转URL不变

有次公司提出这个需求之后，我在网上找了蛮久的，看到通常解决的方法都是加入一个 </code>标签，但其还是属于页面里插入另一个页面，后来在一个有年代感的一个页面里找到了一个方法。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>sendRequest(<span class="token punctuation">"</span>nav.html<span class="token punctuation">"</span>);<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="prism language-javascript"><span class="token keyword">function</span> <span class="token function">createXMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">if</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>XMLHttpRequest<span class="token punctuation">)</span> <span class="token punctuation">{</span>XMLHttpR <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>ActiveXObject<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">try</span> <span class="token punctuation">{</span>XMLHttpR <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ActiveXObject</span><span class="token punctuation">(</span><span class="token string">"Msxml2.XMLHTTP"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">try</span> <span class="token punctuation">{</span>XMLHttpR <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ActiveXObject</span><span class="token punctuation">(</span><span class="token string">"Microsoft.XMLHTTP"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token keyword">function</span> <span class="token function">sendRequest</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token function">createXMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>XMLHttpR<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"GET"</span><span class="token punctuation">,</span> url<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>XMLHttpR<span class="token punctuation">.</span><span class="token function">setRequestHeader</span><span class="token punctuation">(</span><span class="token string">"Content-Type"</span><span class="token punctuation">,</span> <span class="token string">"text/html;charset=gb2312"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>XMLHttpR<span class="token punctuation">.</span>onreadystatechange <span class="token operator">=</span> processResponse<span class="token punctuation">;</span>XMLHttpR<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">function</span> <span class="token function">processResponse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">if</span><span class="token punctuation">(</span>XMLHttpR<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span> <span class="token operator">&&</span> XMLHttpR<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>XMLHttpR<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span> </code></pre> <p>这里通过<code>sendRequest()</code>传入要跳转的URL，跳转后还是显示原来的URL而非跳转后的URL</p> <h3><a id="_39"></a>这原理不是很明白</h3> <ol><li>具体内容的话我也只看懂几分，有大佬翻到了还请帮忙讲解一下原理。</li><li>要的话拿去用就好了，要喷的话请轻点</li></ol>  </div>  <div class="m-article-copyright-notice"> <h3 class="m-copyright-title">版权声明</h3> <p class="m-copyright-text"> 本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 <a href="https://china666.feishu.cn/share/base/form/shrcn5HiHOSejVQ3P07wLwwh6ae" target="_blank" rel="nofollow" class="m-copyright-report-link">举报</a> 进行投诉反馈！ </p> </div>  </div> </div>  <div class="m-detail-footer-wrap"> <div class="m-detail-container">  <div class="m-related-section"> <div class="m-related-header"> <h3 class="m-related-title">推荐阅读</h3> </div> <ul class="m-related-list"> <li class="m-related-item"> <a href="/dev/747938.html" class="m-related-link"> <span class="m-related-item-title">Duilib中list控件支持ctrl和shif多行选中的实现</span> <span class="m-related-item-meta"> <span class="m-related-date m-time-ago" datetime="1701992340" data-time="1701992340">2023-12-08</span> </span> </a> </li> <li class="m-related-item"> <a href="/dev/747937.html" class="m-related-link"> <span class="m-related-item-title">[ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif</span> <span class="m-related-item-meta"> <span class="m-related-date m-time-ago" datetime="1701992333" data-time="1701992333">2023-12-08</span> </span> </a> </li> <li class="m-related-item"> <a href="/dev/747936.html" class="m-related-link"> <span class="m-related-item-title">win10系统微软输入法于eclipse ctrl+shif+f冲突间接处理办法</span> <span class="m-related-item-meta"> <span class="m-related-date m-time-ago" datetime="1701992330" data-time="1701992330">2023-12-08</span> </span> </a> </li> <li class="m-related-item"> <a href="/dev/747935.html" class="m-related-link"> <span class="m-related-item-title">Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif</span> <span class="m-related-item-meta"> <span class="m-related-date m-time-ago" datetime="1701992327" data-time="1701992327">2023-12-08</span> </span> </a> </li> <li class="m-related-item"> <a href="/dev/747934.html" class="m-related-link"> <span class="m-related-item-title">读LDD3，内存映射与DMA--PAGE_SHIF…</span> <span class="m-related-item-meta"> <span class="m-related-date m-time-ago" datetime="1701992325" data-time="1701992325">2023-12-08</span> </span> </a> </li> </ul> </div>   </div>   <footer class="m-site-footer"> <div class="m-footer-container"> <div class="m-footer-content"> <div class="m-footer-links"> <a href="/p/aboutus.html" target="_blank" class="m-footer-link">关于网站</a> <a href="/p/contactus.html" target="_blank" class="m-footer-link">联系我们</a> <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener">浙ICP备14026978号-4</a> </div> </div> </div> </footer> </div>  <div id="detail-actions-tpl" class="m-hidden">  <a href="javascript:;" class="m-btn-action m-btn-like btn-like has-count" data-action="vote" data-type="like" data-id="735445" data-tag="archives" title="点赞"> <i class="fa-regular fa-thumbs-up"></i> <span class="m-btn-action-count"></span> </a>  <a href="javascript:;" class="m-btn-action m-btn-collection addbookbark" data-id="735445" data-aid="735445" data-type="archives" data-action="/addons/cms/ajax/collection.html" title="收藏"> <i class="fa-regular fa-star"></i> </a>    <a href="javascript:;" class="m-btn-action m-btn-share" title="分享"> <i class="fa-solid fa-share-nodes"></i> </a>  <a href="javascript:;" class="m-btn-action m-btn-totop" title="回到顶部"> <i class="fa-solid fa-chevron-up"></i> </a> </div>  <div id="share-content-wrapper" class="m-hidden"> <div class="m-share-modal-body"> <div class="m-share-icons-wrapper"> <a href="javascript:;" data-url="https://private-origin.imspm.com/dev/735445.html" data-title="HTML页面跳转URL不变（http）" data-id="wechat" class="m-share-item m-share-wechat" title="分享到微信"><i class="fa-brands fa-weixin"></i></a> <a href="javascript:;" data-url="https://private-origin.imspm.com/dev/735445.html" data-title="HTML页面跳转URL不变（http）" data-id="weibo" class="m-share-item m-share-weibo" title="分享到微博"><i class="fa-brands fa-weibo"></i></a> <a href="javascript:;" data-url="https://private-origin.imspm.com/dev/735445.html" data-title="HTML页面跳转URL不变（http）" data-id="qq" class="m-share-item m-share-qq" title="分享到QQ"><i class="fa-brands fa-qq"></i></a> <a href="javascript:;" data-url="https://private-origin.imspm.com/dev/735445.html" data-title="HTML页面跳转URL不变（http）" data-id="link" class="m-share-item m-share-link" title="复制链接"><i class="fa-solid fa-link"></i></a> </div> <div class="m-share-modal-tip">点击图标分享</div> </div> </div>  <script src="/assets/addons/cms/js/typezen/article.js?v=1.0.78"></script>  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "HTML页面跳转URL不变（http）", "image": [ "https://private-origin.imspm.com/assets/addons/cms/img/noimage.jpg" ], "datePublished": "2023-11-24T18:53:55+08:00", "dateModified": "2023-11-24T18:53:55+08:00", "author": [{ "@type": "Person", "name": "超级产品经理", "url": "https://private-origin.imspm.com/u/0" }], "publisher": { "@type": "Organization", "name": "超级产品经理", "logo": { "@type": "ImageObject", "url": "/assets/img/imspm_logo.svg" } }, "description": "新加入的第一篇（http） HTML页面跳转URL不变有次公司提出这个需求之后，我在网上找了蛮久的，看到通常解决的方法都是加入一个标签，但其还是属于页面" } </script> </div> </main>  </div> </div>  <script src="/assets/libs/jquery/dist/jquery.min.js"></script> <script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script> <script src="/assets/libs/fastadmin-layer/dist/layer.js"></script> <script src="/assets/libs/art-template/dist/template-native.js"></script> <script src="/assets/addons/cms/js/jquery.autocomplete.js"></script> <script src="/assets/addons/cms/js/cms.js"></script> <script src="/assets/addons/cms/js/common.js"></script> <script src="/assets/addons/cms/js/typezen/theme.js?v=1.0.78"></script>   <nav class="m-mobile-nav" role="navigation" aria-label="移动端导航">  <a href="/" class="m-mobile-nav-item "> <svg class="m-mobile-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9,22 9,12 15,12 15,22"></polyline> </svg> <span class="m-mobile-nav-label">首页</span> </a>  <a href="/s.html" class="m-mobile-nav-item"> <svg class="m-mobile-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> <span class="m-mobile-nav-label">搜索</span> </a>  <a href="/[:diyname].html" class="m-mobile-nav-item"> <svg class="m-mobile-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="8" y1="6" x2="21" y2="6"></line> <line x1="8" y1="12" x2="21" y2="12"></line> <line x1="8" y1="18" x2="21" y2="18"></line> <line x1="3" y1="6" x2="3.01" y2="6"></line> <line x1="3" y1="12" x2="3.01" y2="12"></line> <line x1="3" y1="18" x2="3.01" y2="18"></line> </svg> <span class="m-mobile-nav-label">栏目</span> </a>  <a href="/index/user/index.html" class="m-mobile-nav-item"> <svg class="m-mobile-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> <span class="m-mobile-nav-label">我的</span> </a> </nav>  <link rel="stylesheet" href="/assets/addons/contentunlocker/css/unlocker.css?v=1783272319"> <script> window.contentUnlockerConfig = {"theme_color":"#2563eb","dialog_title":"\u68c0\u6d4b\u5230\u6d4f\u89c8\u5668\u5f00\u542f\u4e86\u5e7f\u544a\u62e6\u622a\u5668","dialog_desc":"\u8bf7\u5173\u95ed\u5e7f\u544a\u62e6\u622a\u5668\u6216\u5c06\u672c\u7ad9\u52a0\u5165\u5e7f\u544a\u62e6\u622a\u5668\u767d\u540d\u5355\uff0c\u652f\u6301\u6211\u4eec\u7ee7\u7eed\u4e3a\u60a8\u63d0\u4f9b\u4f18\u8d28\u5185\u5bb9\u3002","close_delay":"60"}; window.contentUnlockerConfig.plugin_url = '/assets/addons/contentunlocker'; </script> <script src="/assets/addons/contentunlocker/js/unlocker.js?v=1783272319"></script> </body> </html>