Question

由于该应用使用JavaScript的方式，我非常想节省时间以供离线查看站点。

一些背景：

该网站使用Ember-JS进行渲染。它使用RequireJS加载用于各种任务（例如用户交互）的各种模块。它还使用了一个名为New Relic的工具，但我认为它只是用于报告。
我无权访问远程服务器。
我登录网站以获得访问权限。
网站完全加载后，从Chrome浏览器查看源代码时，除了其他一些样板内容之外，实际上没有任何内容显示。相反，您有
```
<--EMBER_CLI_FASTBOOT_BODY-->
```
我使用Chrome扩展程序Save All Resources来保存网站以供离线使用。但这不会产生有用的.html文件。
因此，在Chrome开发工具中，我查看DOM以便获取实际的渲染HTML并将HTML文件保存在所需的文件夹级别，以便正确引用上述5中保存的资产。
一切都很好，但是当我打开保存的HTML文件（通过localhost）时，它首先加载了页面，并且看起来一切都很好，但是随后页面突然空白了。

我一直在试图对这件事进行逆向工程。我已经遍历了JavaScript，并且正在执行大量操作，因为该应用程序并未意识到它不需要执行任何操作，并且正在尝试执行首次呈现页面时所执行的所有操作。大量的初始化器等等等。

例如，应用程序的一部分包含以下内容：

define("site/initializers/login-refresh", ["exports", "ember", "jquery", "site/config/environment"], function(e, t, n, a) {
    e.default = {
        name: "login-refresh",
        initialize: function() {
            var e = this,
                r = 0,
                l = void 0;
            if ("readonly" !== a.default.environment) {
                var i = (0, n.default)('<iframe id="login-refresh" style="width: 1px; height: 1px; left: -500px; position: fixed;"></iframe>');
                (0, n.default)("body").append(i);
                var o = function n() {
                    if (r++, t.default.run.later(e, n, 6e4), !document.cookie.match(/masquerading/)) {
                        r % 15 != 0 && document.cookie.match(/^canvas_user_id=|; canvas_user_id=/) || (console.log("Refreshing session"), i.attr("src", "/login/saml?return_to=/accounts/1"));
                        var a = document.cookie.match(/(\s|^)ad_user_login=([0-9]+)[^0-9]/i);
                        a || (a = document.cookie.match(/(\s|^)ad_session_id=[0-9]+%2c([0-9]+)[^0-9]/i)), !l || a && a[2] === l || !confirm('You seem to have changed users.  Press "Ok" to reload this page with your new credentials.') || (window.location = "/login/saml?return_to=" + encodeURIComponent(window.location.href)), a && (l = a[2])
                    }
                };
                t.default.run.later(this, o, 6e4)
            }
        }
    }
})

在页面空白处，代码跳至该部分，在Chrome Dev Tools控制台中，我看到有关无法加载该/ login / saml？return_to页面的错误。明白了。

所以我将上面的if语句之一修改为

if (false) {
                        r % 15 != 0 && true || (console.log("Refreshing session"), i.attr("src", "/login1/saml?return_to=/accounts/1"));
                        var a = document.cookie.match(/(\s|^)ad_user_login=([0-9]+)[^0-9]/i);
                        console.log(a);
                        a || (a = document.cookie.match(/(\s|^)ad_session_id=[0-9]+%2c([0-9]+)[^0-9]/i)), !l || a && a[2] === l || !confirm('You seem to have changed users.  Press "Ok" to reload this page with your new credentials.') || (window.location = "/login2/saml?return_to=" + encodeURIComponent(window.location.href)), a && (l = a[2])
                    }
                };
                //t.default.run.later(this, o, 6e4)

通过这种更改并注释掉了烦人的计时器现在页面已加载，我看到了图像和应用的音频播放器，但没有有效的JavaScript交互。例如，页面具有各种元素，其作用类似于引导折叠。应用中控制该功能的部分是

define("site/mixins/interactions/reveal_content", ["exports", "jquery"], function(e, t) {
    function n(e) {
        this.el = e, this.interactionData = e.find(".interaction_data"), this.container = e.find(".interaction_content")
    }
    n.prototype = {
        init: function() {
            var e = (0, t.default)("<div />").append((0, t.default)(this.interactionData.find("td")[1]).detach()),
                n = (0, t.default)('<div class="pointer" />').append((0, t.default)(this.interactionData.find("td")[0]).detach());
            this.container = this.container.parent().find(".RevealContent"), this.container.append(n), this.container.append(e.hide()), n.click(function() {
                (0, t.default)(e).slideToggle("slow")
            }), n.find("a").click(function(e) {
                e.preventDefault()
            })
        }
    }, e.default = n

这是一个这样的元素的HTML：

<div class="interaction_content RevealContent" style="min-height: 400px; width: 400px;">
    <div class="pointer">
        <div id="area49275747_95" class="component image-component float-left clear-none  booted">
        <img src="somelink.html" title="" alt="" style="padding-right: 10px;" width="58" height="59">
        </div>
        <p class="body" id="area49275747_96"><em><strong><a href="#">Workshop Answers 5.<br></a></strong></em></p>
    </div>
    <div style="display: none;"><p class="body" id="area49275747_104"><strong><em>6th and 7th </em></strong></p></div>
</div>

现在，我已经确认该HTML在加载页面的远程版本上是相同的。并注意您如何在该特定div的类名中“启动”：

<div id="area49275747_95" class="component image-component float-left clear-none  booted">

我认为这可以告诉应用程序（理论上）所有内容都已加载/启动。这样就可以使用HTML了，但是无论如何，该应用程序还是不允许任何JavaScript功能正常工作，我只是想不通为什么...也许是因为我干扰了该登录刷新功能，但其他方面却出现了问题，像事件监听器未加载。我只是不知道或者也许我错过了一个如此简单的东西，而这段时间我一直在逐步检查代码，试图了解RequireJS的全部含义，是否正在搞砸事情，或者这个新遗物是否是罪魁祸首，等等，等等。

我已经考虑过编写一个脚本，将所有交互都转换为标准jQuery和HTML5，但这将需要大量工作。我真的希望我可以让所有这些RequireJS模块定义都可以在此脱机上下文中使用...

该应用文件很大，约为1.4 MB。如果有人感兴趣，我可以发帖，但我认为也许有人从我在这里描述的内容中了解了问题的关键所在。

免责声明：我不是开发人员。我对编码了解一两件事，但是这种企业级应用程序超出了我目前的理解。

如何镜像使用服务器端JavaScript和RequireJS的站点？也就是说-强制应用识别已加载的网站？

0 个答案: