如何在不更改链接的情况下将一个 HTML 文件更改为另一个？

Question

我有一个 html 文件（一个网页）。 我希望当我按下一个按钮时，页面应该被另一个 html 文件（带有它自己的 css、javascript 函数等）替换，而不会被重定向到其他链接。

例如，如果第一种情况下的链接是 abc.com/def，那么后面也应该相同。

使用此代码，我可以更改网页外观，但无法从另一个文件中更改外观（以及设法加载 css 和 js 函数）。

<script type="text/javascript">
    document.body.addEventListener('click',function(){
        document.write("THIS IS NEW TEXT")
        },
        false);
</script>

Answer 1

你需要研究像 AngularJS 这样的框架，特别是 Angular 的路由。 它们为 Web 应用程序提供了内置的此类功能。 但是，您可以使用 javascript 以艰难的方式做到这一点，就像您现在正在做的那样。 如果您不想学习任何新框架或库，请添加 CSS 并使用 javascript 更改整个 HTML。

Answer 2

正如其他人所讨论的那样，您应该使用框架来执行此操作。

但这是一个完整的解决方案，您可以从中得到启发：

 let layouts = {} let current = null // Display the new page by deleting current, and replacing by the good one let displayLayout = (layout_id) => { let parentNode = current.parentNode parentNode.removeChild(current) current = layouts[layout_id] parentNode.appendChild(current) loadEvents(current) } // Load event for HTML DOM you just created let loadEvents = (layout_el) => { Array.from(layout_el.getElementsByClassName('go-to-layout')).forEach(el => { el.addEventListener('click', e => { e.preventDefault() displayLayout(e.currentTarget.dataset.layout) }) }) } // On init I get all the existing layout, but you can build you own dictionary an other way. Array.from(document.getElementsByClassName('layout')).forEach(l => { layouts[l.id] = l if (l.classList.contains('active')) { loadEvents(l) current = l } else { l.parentNode.removeChild(l); } })

 /* Global CSS */ body, html, .layout { height: 100%; margin: 0; } * { color: #FFF } .layout { display: flex; } .nav, .page { } .nav { width: 150px; background: #555; } /* Special CSS for one layout */ #layout1 { background: red; } #layout2 { background: blue; }

 <div id="layout1" class="layout active"> <div class="nav"> <a href="#" class="go-to-layout" data-layout="layout2">Page 2</a> </div> <div class="page"> This is page 1 </div> </div> <div id="layout2" class="layout"> <div class="nav"> <a href="#" class="go-to-layout" data-layout="layout1">Page 1</a> </div> <div class="page"> This is page 2 </div> <style>.page { font-size: 2em }</style> </div>

Answer 3

你想使用PJAX ，这是一个例子的链接。