用替代内容（HTML + CSS + JS）替换整个网页

David 发表于 Dev

大卫

我面临一个我确定很普遍的问题。我找到了解决该问题的许多解决方案，它们各有利弊。我将发布在这里找到的内容（我认为这对其他人有用），希望您能为我指明正确的方向。

本质上，这是我的情况：

我有一个PHP网页：http://example.com/page_with_content_a_or_b.php。
Content A如果未指定POST参数，则返回此页面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>

两个版本之间的差异

如您所见，在示例中，两个版本非常相似，但不完全相同。通常，这些是我可能会遇到的差异：

全部或部分导入样式表或不导入样式表可能有所不同。
全部或部分或全部未导入的javascript可能有所不同。
内联样式表和/或javascript可能有所不同。
内容是不同的，但可能仅略有不同或完全不同。
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数据重定向（使用表单）

另一个解决方案是执行上一个问题中描述的重定向。该解决方案就像一个魅力：一方面，我加载了需要加载的URL，其中包含了所需的POST数据，这意味着我将得到Content B；另一方面，它Content B被加载至了一个“新页面”中，这意味着加载的脚本Content A不再存在。

这里有问题吗？如果使用刷新页面Content B，则会收到一条警告，指出“ POST数据将要重新提交”。这是不希望的，因为这会使用户感到困惑（我不希望她知道她已被重定向到新页面）。

我知道有一种解决方案称为PRG（Post-Redirect-Get），可以避免此特定问题。但是，它需要Content B使用GET请求（使用GET参数或COOKIES，我都不能使用）进行访问。

使用iframe

我发现的最后一个解决方案也很有趣。基本上，它从中隐藏（或清空）主体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();
        }
    });
});

anchor.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），因此完全没有警告出现。

但是，此解决方案面临的问题是：

用户可以禁用iframe。如何检测是否启用或停用iframe？
当用户单击框架中的链接（或提交表单）时，“新页面”将在iframe中打开。这不是我想要的：我希望在主窗口中打开它。我该怎么做呢？我知道链接有base指令...但是表格呢？以及执行重定向的JavaScript代码？
一切都可以在iframe中正常运行吗？响应式主题，javascript，...据我所知，它们确实可以，但我忽略了用户是否可以限制iframe的功能。

TL; DR-结论

我有一页http://example.com/page_with_content_a_or_b.php。Content A使用GET请求访问时返回页面，Content B使用POST访问时返回页面。用户键入URL时，她得到Content A，并Content B使用JavaScript加载。

所有解决方案都存在问题：

使用document.open（），document.write（），document.close（）会使脚本陷入混乱。
使用POST重定向时，刷新页面会弹出警告
使用iframe时，它们并不总是可用，而且我莫名其妙地“卡在”其中。

有任何想法吗？我想念什么吗？有没有首选的方式来做我想做的事？

非常感谢你！

阿维尔加森

在您的第一个解决方案中，有一个针对杂乱脚本行为问题的修补程序。假设与脚本相关的问题仅在使用超时时发生（我不知道是否还有其他情况可能会出错....），所以有一种清除所有超时的简单方法。只需添加以下代码：

var id = window.setTimeout(function() {}, 0);
while (id--)
    window.clearTimeout(id);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-8

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章