Я трачу время на сохранение сайта для просмотра в автономном режиме из-за того, как приложение использует JavaScript.
Некоторый фон:
- Сайт использует Ember-JS для рендеринга. Он использует RequireJS для загрузки различных модулей, используемых для различных задач, таких как взаимодействие с пользователем. Он также использует инструмент под названием New Relic , но я думаю, что он предназначен только для отчетов.
- У меня нет доступа к удаленному серверу.
- Я захожу на сайт, чтобы получить доступ.
Когда сайт полностью загружается, при просмотре исходного кода из Chrome, кроме как и некоторого другого содержимого панели, содержимое фактически не отображается. Вместо этого у вас есть
<--EMBER_CLI_FASTBOOT_BODY-->
Я использую расширение Chrome Сохранить все ресурсы , чтобы сохранить сайт в автономном режиме. Но это не приводит к полезному файлу .html.
- Итак, в Chrome Dev Tools я просматриваю 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 (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 и что он все испортил, или это новая Relic является виновником, и т. Д., И т. Д.
Я думал о написании скрипта, который бы просто конвертировал все взаимодействия в стандартные jQuery и HTML5, но это будет много работы. Я действительно надеюсь, что смогу получить все эти определения модуля RequireJS для работы в этом автономном контексте ...
Файл приложения большой, около 1,4 МБ. Я могу публиковать сообщения, если кому-то интересно, но я подумал, что, может быть, кто-то понимает, что является центральной проблемой, только из того, что я здесь описал.
Отказ от ответственности: я не разработчик. Я знаю кое-что о кодировании, но такое приложение уровня предприятия выходит за рамки моего текущего понимания.