用替代内容(HTML + CSS + JS)替换整个网页 [英] Replacing a whole webpage with alternative content (HTML + CSS + JS)

查看：112
本文介绍了用替代内容(HTML + CSS + JS)替换整个网页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到了一个肯定会很普遍的问题.我发现了许多解决此问题的方法，它们各有利弊.我将在这里发布我发现的内容(我认为这对其他人有用)，希望您能为我指明正确的方向.

I am facing a problem that I am sure is pretty common. I found many solutions to this problem, and they all have their pros and cons. I'll post what I found here (which I believe will be useful to others), and I hope you'll point me in the right direction.

本质上，这是我的情况:

Essentially, this is my scenario:

  1. 我有一个使用PHP的网页:http://example.com/page_with_content_a_or_b.php.
  2. 如果未指定POST参数，则此页面返回Content A，如果未指定，则返回Content B.
  3. 假设用户连接到我的页面，并在浏览器中键入上一个URL(一个GET请求).
  4. 我的服务器返回带有Content A的页面.
  5. 用户的Web浏览器通过JavaScript决定将Content A替换为Content B.
  1. I have a webpage in PHP: http://example.com/page_with_content_a_or_b.php.
  2. This page returns Content A when no POST parameters are specified, and Content B if there are.
  3. Assume a user connects to my page typing the previous URL in her browser (a GET request).
  4. My server returns the page with Content A.
  5. The user's web browser, via JavaScript, decides to replace Content A with Content B.

问题:JavaScript如何替换内容?

嗯，正如我所说，我一直在寻找不同的解决方案，但似乎都不是完美的.

Well, as I've said, I've been looking for different solutions, but none seems perfect.

为了讨论每种可能的解决方案，让我向您介绍每个版本的结果HTML代码:

In order to discuss each possible solution, let me introduce you the resulting HTML code of each version:

内容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>

两个版本之间的差异

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

As you can see, in the example both versions are quite similar, but not identical. In general, these are the differences I might encounter:

  • 全部或部分导入的样式表或全部不导入.
  • 全部或部分或全部未导入的javascript可能会有所不同.
  • 内联样式表和/或javascripts可能有所不同.
  • 内容不同，但可能仅有些不同或完全不同.
  • Content B不包括用于加载自身的脚本(Content A中的最后一个脚本).
  • All or some or none imported stylesheets may be different.
  • All or some or none imported javascripts may be different.
  • There might be differences with inline stylesheets and/or javascripts.
  • The content is different, but it may differ a little bit only or be completely different.
  • Content B does not includes the script for loading itself (last script in Content A).

我实现的第一个解决方案如下:

The first solution I implemented is the following:

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的脚本.假定此脚本如下:

Apparently, the solution works properly. However, there are situations in which I have problems. In my example, for instance, both contents load a script named gallery-animator.js. Assuming this script is the following:

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中执行脚本后，

有两个使图库动画化的超时.结果，动画看起来像一团糟(两个图像同时移动，或者根本不工作).

after executing the script in content-b-loader.js there are two timeouts animating the gallery. As a result, the animation looks like a mess (two images moving at the same time, or not working at all).

看起来序列document.open()，document.write(html)和document.close()不会停止并替换原始脚本.

It looks like the sequence document.open(), document.write(html), and document.close() does not stop and replace the original scripts.

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

Another solution is doing a redirection described in this previous question. The solution works like a charm: on the one hand, I load the URL I need to load with the required POST data, which means I'll get Content B, and on the other hand, Content B is loaded in a "new page", which means that the scripts loaded by Content A are no longer there.

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

The problem here? If I refresh the page with Content B, I get a warning stating that "POST data is about to be resubmitted". This is undesirable, because it looks confusing for the user (I don't want her to know she had been redirected to a new page).

我知道有一个名为 PRG(重定向后)的解决方案-Get)，可以避免出现此特定问题.但是，它要求Content B可以使用GET请求(使用GET params或COOKIES，我都不能使用)来访问.

I know there's a solution called PRG (Post-Redirect-Get) which avoids this particular issue. However, it requires Content B to be accessible using a GET request (using GET params or COOKIES, neither of which I can use).

我找到的最后一个解决方案也很有趣.基本上，它从Content A隐藏(或清空)主体，在页面中添加 iframe ，并在其中加载Content B:

The last solution I've found is also interesting. Basically, it hides (or empties) the body from Content A, adds an iframe in the page, and loads Content B inside it:

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重定向).

This page implements the second solution (it uses a POST redirect).

<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的页面)，因此完全没有警告出现.

By making the iframe as big as the window view, I can show the alternative content. If the user refreshes the webpage, the page that is refreshed is the "container" page (the one that originally had Content A), so no warnings appear at all.

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

The problems I am facing with this solution, however, are:

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

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

I have a page http://example.com/page_with_content_a_or_b.php. The page returns Content A when accessed using a GET request, and returns Content B when accessed using POST. When user types the URL, she gets Content A, and Content B is loaded using JavaScript.

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

All solutions entail problems:

  • 使用document.open()，document.write()，document.close()会使脚本陷入混乱.
  • 使用POST重定向时，刷新页面弹出窗口会显示警告
  • 使用iframe时，它们并不总是可用，而且我莫名其妙地卡在"其中.

有什么想法吗?我想念什么吗?是否有首选的方式来做我想做的事?

非常感谢！

推荐答案

There's a hacky fix for the problem with messy script behavior in your first solution. Assuming that the script-related problem only occurs when using timeouts (I don't know if there are other scenarios in which things can go wrong....), there's an easy way to clear all timeouts. Just add this code:

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

这篇关于用替代内容(HTML + CSS + JS)替换整个网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆