JQM 如何增强动态注入的整页内容（作为重定向的结果）？
Posted
技术标签:
【中文标题】JQM 如何增强动态注入的整页内容（作为重定向的结果）？【英文标题】：JQM How to Enhance a full page content that is being dynamically injected (as result of redirect)? 【发布时间】：2018-11-16 16:29:10 【问题描述】：版本： JQM 1.4.5。
场景 当服务器端返回无效标记而不是预期的 ajax 调用的 json 数据时，UI 端将显示服务器端返回的任何内容（例如登录页面、系统错误页面......）
长期以来，它在桌面版上运行良好。现在我正在尝试移植逻辑以适用于 JQM，但遇到了麻烦。
症状：
(a) 页面标记未增强。 (b) 样式表（在重定向的 html 页面内的标记中指定）未应用
代码：
$.ajax(
type: "POST",
dataType: "json",
...
error: function (XMLHttpRequest, textStatus, errorThrown)
...
//display whatever server sends back.
if (textStatus == parsererror_textStatus )
document.write(XMLHttpRequest.responseText);
$('#main').trigger('pagecreate');
$('#main').enhanceWithin();
);
参考文献 我在网上搜索了很多。但它还没有为我解决。有什么建议？
https://www.gajotres.net/jquery-mobile-and-how-to-enhance-the-markup-of-dynamically-added-content/
jquery mobile Dynamically Injecting Pages
http://demos.jquerymobile.com/1.3.2/faq/scripts-and-styles-not-loading.html
jQuery Mobile does not apply styles after dynamically adding content
Forcing jQuery Mobile to re-evaluate styles/theme on dynamically inserted content
【问题讨论】：
看这里：How can I make document.write and ajax play nice? 但是......只是猜测，我相信你最终会得到一堆乱七八糟的页面，因为 JQM 有自己的页面处理和缓存机制。 感谢解禁器。我的猜测是我需要找到一种方法，以便该页面能够通过 JQM 的页面处理。看起来问题不是 document.write 和 ajax 之间的交互（因为它适用于桌面 Web 版本）。感谢您的评论！ 我相信 document.write 仅在页面加载时有效；如果在页面加载完成后调用它，它将覆盖整个 HTML 页面。 用任何服务器响应的内容覆盖整个页面（最终用户所在的位置）是意图。似乎这部分正在工作。不起作用的是这个较新的页面（作为服务器响应吐出）就像纯字符串一样，并且没有增强 JQM。 （网页版没有这个问题，因为不需要任何增强）。 在重定向前插入新页面。 首次访问时，新页面将得到全面增强。 【参考方案1】：我最终让它工作了。以防将来可能对某人有所帮助，让我在这里发布答案。
JQM 元素必须得到增强和主题化。在这种“捕获并显示重定向响应内容”的情况下，我们必须以编程方式进行； 为了让#1 工作，最终发现我们需要以编程方式将“响应内容”加载到 DOM 中代码清单：
if (textStatus == parsererror_textStatus )
displayResponseContent(XMLHttpRequest.responseText);
function displayResponseContent(fullResponse)
loadIntoDOM( fullResponse);
enhancePageMarkup();
//The response has to be loaded into DOM for later manipulation
function loadIntoDOM(fullResponse)
var startIdx = fullResponse.indexOf("<body>");
var endIdx = fullResponse.indexOf("</body>");
var bodyTxt = fullResponse.substring(startIdx, endIdx + 7);
//The main thing here is to load the "body" into DOM
var bodyDomNodes = $.parseHTML(bodyTxt, true);
$(document.body).empty().append(bodyDomNodes);
//enhance the markup of dynamically added content(e.g: "page" in our case)
function enhancePageMarkup()
$('div[data-role=page]').trigger('pagecreate');
$(document.documentElement).enhanceWithin();
$('div[data-role=page]').addClass("ui-page-active");
【讨论】：
以上是关于JQM 如何增强动态注入的整页内容（作为重定向的结果）？的主要内容，如果未能解决你的问题，请参考以下文章