我面临一个问题，我相信这是相当普遍的。我找到了很多解决这个问题的方法，它们都有各自的优缺点。我会把我在这里找到的东西贴出来（我相信这对其他人会有用），我希望你能给我指明正确的方向。
基本上，这是我的设想：
我有一个PHP网页：http://example.com/page_with_content_a_or_b.php。
如果未指定POST参数，则此页返回Content A，如果有，则返回Content B。
假设一个用户连接到我的页面，在她的浏览器中输入上一个URL（GET请求）。
我的服务器返回带有Content A的页面。
用户的web浏览器通过JavaScript决定将Content A替换为Content B。
问题是：JavaScript如何替换内容？
嗯，正如我所说，我一直在寻找不同的解决方案，但似乎没有一个是完美的。
为了讨论每个可能的解决方案，让我向您介绍每个版本的HTML代码：
内容A的HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_A.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="gallery-animator.js"></script>
</head>
<body>
<div class="gallery"><!-- images here --></div>
<p>Content A</p>
<script type="text/javascript" src="content-b-loader.js"></script>
</body>
</html>
内容B的HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_B.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="gallery-animator.js"></script>
</head>
<body>
<div class="gallery"><!-- images here --></div>
<p>Content B</p>
</body>
</html>
两个版本之间的差异
如您所见，在本例中，两个版本非常相似，但并不完全相同。一般来说，我可能会遇到以下差异：
全部或部分或全部导入的样式表可能不同。
全部或部分或全部导入的javascripts可能不同。
与内联样式表和/或javascripts可能存在差异。
内容不同，但可能只是略有不同，也可能完全不同。
Content B不包括用于加载自身的脚本（最后一个脚本在Content A中）。可能的解决方案
将内容替换为document.open（）、document.write（）和document.close（）
我实现的第一个解决方案是：
content-b-loader.js（选项1）
$(document).ready(function() {
$.ajax({
type: 'POST',
url: window.location.href,
data: { load_content_b: 'true' },
success: function( html ) {
document.open();
document.write(html);
document.close();
}
});
});
显然，这个解决方案是正确的。然而，有些情况下我有问题。例如，在我的示例中，两个内容都加载一个名为
gallery-animator.js的脚本。假设此脚本如下：gallery-animator.js动画库
var galleryInterval = setInterval(function() {
// Fade out current image and fade in the next one
$("body > div.gallery > img")...
}, 5000);
在
content-b-loader.js中执行脚本后，有两个超时设置库的动画。结果，动画看起来一团糟（两个图像同时移动，或者根本不起作用）。看起来序列
document.open()、document.write(html)和document.close()不会停止并替换原始脚本。使用POST数据重定向（使用表单）
另一个解决方案是执行in this previous question描述的重定向。这个解决方案的工作方式很有魅力：一方面，我用所需的POST数据加载需要加载的URL，这意味着我将得到
Content B，另一方面，Content B被加载到一个“新页面”中，这意味着Content A加载的脚本不再存在。这里的问题？如果我用
Content B刷新页面，就会收到一条警告，指出“POST数据即将重新提交”。这是不可取的，因为它看起来让用户困惑（我不想让她知道她已经被重定向到一个新页面）。我知道有一个叫做PRG (Post-Redirect-Get)的解决方案可以避免这个特殊的问题但是，它要求使用GET请求（使用GET params或COOKIES，两者我都不能使用）访问
Content B。使用iframes
我找到的最后一个解决方案也很有趣。基本上，它从
Content A隐藏（或清空）主体，在页面中添加iframe，并在其中加载Content B：content-b-loader.js（选项3）
$(document).ready(function() {
$.ajax({
type: 'POST',
url: window.location.href,
data: { load_content_b: 'true' },
success: function( html ) {
$("body").css('', ''); // Remove all paddings and margins
$("body").empty();
$("body")append('<iframe id="content" seamless="seamless"' +
'src="anchor.html"></iframe>');
// Initialize vars in anchor.html and call the redirect functions
document.getElementById('content').contentWindow.url = window.location.href;
document.getElementById('content').contentWindow.options = {
load_content_b: 'true'
};
document.getElementById('content').contentWindow.redirect();
}
});
});
锚定.html
此页实现第二个解决方案（它使用POST重定向）。
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.redirect.min.js"></script>
<script type="text/javascript">
var url;
var options;
function redirect(){
$().redirect(url, options, 'POST');
}
</script>
</head>
<body></body>
</html>
通过使iframe与窗口视图一样大，我可以显示可选内容。如果用户刷新网页，则刷新的页面是“容器”页面（最初具有
Content A的页面），因此根本不会出现警告。然而，我面临的问题是：
用户可以禁用iframes。如何检测iframe是启用的还是禁用的？
当用户单击框架中的链接（或提交表单）时，“新页面”将在iframe中打开。这不是我想要的：我想要它在主窗口打开。我该怎么做？我知道这里有
base directive链接但表格呢？以及执行重定向的JavaScript代码？iframes内部的一切工作正常吗？响应主题，javascripts。。。据我所知，它们确实如此，但我忽略了用户是否可以限制iframe的功能。
TL；DR-结论
我有一页
http://example.com/page_with_content_a_or_b.php。使用GET请求访问时，该页返回Content A，使用POST访问时返回Content B。当用户输入URL时，她将得到Content A，并使用JavaScript加载Content B。所有解决方案都会带来问题：
使用document.open（）、document.write（）、document.close（）时，脚本会变得混乱。
使用POST重定向，刷新页面弹出一个警告
有了iframe，它们并不总是可用的，而且我不知怎么地在它们里面“受挫”。
有什么想法吗？我遗漏了什么吗？有没有更好的方法来做我想做的事？
非常感谢你！
最佳答案
There's a hacky fix对于第一个解决方案中混乱的脚本行为的问题。假设脚本相关的问题只在使用超时时发生（我不知道是否有其他情况下会出错…），那么有一种简单的方法可以清除所有超时。只需添加以下代码：
var id = window.setTimeout(function() {}, 0);
while (id--)
window.clearTimeout(id);
关于javascript - 用替代内容(HTML + CSS + JS)替换整个网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22478441/