"要使用<iframe>实现页面跳转而URL不变,可以将要跳转的页面嵌套在<iframe>标签中。具体的代码如下:\n\nhtml\n\<div class="Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter" style="margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;">\n\t\<div class="Polaris-Stack__Item">\n\t\t\<div class="Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter">\n\t\t\t\<div class="Polaris-Stack__Item">\n\t\t\t\t\<div class="sc-1ibht3l-0 uqRZq"></div>\n\t\t\t\t\<div class="sc-1ibht3l-1 hIZedH">\n\t\t\t\t\t\<div class="Polaris-ButtonGroup">\n\t\t\t\t\t\t\<div class="Polaris-ButtonGroup__Item">\n\t\t\t\t\t\t\t\<a data-polaris-unstyled="true" class="Polaris-Button" href="index.html" target="my-iframe">\n\t\t\t\t\t\t\t\t\<span class="Polaris-Button__Content">\n\t\t\t\t\t\t\t\t\t\<span class="Polaris-Button__Text">Dashboard</span>\n\t\t\t\t\t\t\t\t\</span>\n\t\t\t\t\t\t\t\</a>\n\t\t\t\t\t\t\</div>\n\t\t\t\t\t\t\<div class="Polaris-ButtonGroup__Item">\n\t\t\t\t\t\t\t\<a data-polaris-unstyled="true" class="Polaris-Button" href="zone.html" target="my-iframe">\n\t\t\t\t\t\t\t\t\<span class="Polaris-Button__Content">\n\t\t\t\t\t\t\t\t\t\<span class="Polaris-Button__Text">Checkout Zones</span>\n\t\t\t\t\t\t\t\t\</span>\n\t\t\t\t\t\t\t\</a>\n\t\t\t\t\t\t\</div>\n\t\t\t\t\t\t\<div class="Polaris-ButtonGroup__Item">\n\t\t\t\t\t\t\t\<a data-polaris-unstyled="true" class="Polaris-Button" href="funnel.html" target="my-iframe">\n\t\t\t\t\t\t\t\t\<span class="Polaris-Button__Content">\n\t\t\t\t\t\t\t\t\t\<span class="Polaris-Button__Text">Funnels</span>\n\t\t\t\t\t\t\t\t\</span>\n\t\t\t\t\t\t\t\</a>\n\t\t\t\t\t\t\</div>\n\t\t\t\t\t\t\<div class="Polaris-ButtonGroup__Item">\n\t\t\t\t\t\t\t\<a data-polaris-unstyled="true" class="Polaris-Button" href="help.html" target="my-iframe">\n\t\t\t\t\t\t\t\t\<span class="Polaris-Button__Content">\n\t\t\t\t\t\t\t\t\t\<span class="Polaris-Button__Text">Help Center</span>\n\t\t\t\t\t\t\t\t\</span>\n\t\t\t\t\t\t\t\</a>\n\t\t\t\t\t\t\</div>\n\t\t\t\t\t\t\<div class="Polaris-ButtonGroup__Item">\n\t\t\t\t\t\t\t\<div>\n\t\t\t\t\t\t\t\t\<button type="button" id="moreSeting" class="Polaris-Button" tabindex="0" aria-controls="Popover486" aria-owns="Popover486" aria-haspopup="true" aria-expanded="false">\n\t\t\t\t\t\t\t\t\t\<span class="Polaris-Button__Content">\n\t\t\t\t\t\t\t\t\t\t\<span class="Polaris-Button__Text">More</span>\n\t\t\t\t\t\t\t\t\t\t\<span class="Polaris-Button__Icon">\n\t\t\t\t\t\t\t\t\t\t\t\<span class="Polaris-Icon">\n\t\t\t\t\t\t\t\t\t\t\t\t\<svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\<path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path>\n\t\t\t\t\t\t\t\t\t\t\t\t\</svg>\n\t\t\t\t\t\t\t\t\t\t\t\</span>\n\t\t\t\t\t\t\t\t\t\t\</span>\n\t\t\t\t\t\t\t\t\t\</span>\n\t\t\t\t\t\t\t\t\t\<div id="dropdownContent" class="dropdown-content">\n\t\t\t\t\t\t\t\t\t\t\<a href="payment.html" target="my-iframe">Payment</a>\n\t\t\t\t\t\t\t\t\t\t\<a href="facebookPixel.html" target="my-iframe">Pixel</a>\n\t\t\t\t\t\t\t\t\t\</div>\n\t\t\t\t\t\t\t\t\</button>\n\t\t\t\t\t\t\t\</div>\n\t\t\t\t\t\t\</div>\n\t\t\t\t\</div>\n\t\t\t\</div>\n\t\t\</div>\n\t\</div>\n\</div>\n\n\<iframe name="my-iframe" src="http://127.0.0.1/" frameborder="0" style="width:100%; height:100%;"></iframe>\n\n\n在上面的代码中,我为每个链接添加了target="my-iframe"属性,这样点击链接时,页面会在名为my-iframe的<iframe>中打开。并且我在代码的最后添加了一个<iframe>标签,用于展示页面内容。将该代码放在HTML页面的合适位置即可实现在<iframe>中跳转页面而URL不变。\n\n注意: 使用<iframe>来实现页面跳转可能会影响网站的性能,因为它需要加载额外的页面内容。如果您需要在网站中实现更复杂的功能,建议使用其他方法,例如 AJAX 或 JavaScript。\n


原文地址: https://www.cveoy.top/t/topic/p5o7 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录