JQuery Mobile 更改页面不加载 JS 文件 [英] JQuery Mobile Change Page doesnt load JS files

问题描述

为了更好地组织我们的 JQuery Mobile PhoneGap 应用程序，我希望能够在新页面上使用标签，并在页面被引入时让 JS 进入，使用 changePage 或其他东西.

In an effort to better organize our JQuery Mobile PhoneGap application I would like to be able to use tags on the new page and have that JS come in when the page is brought in, with changePage or something other.

到目前为止，我为此所做的努力并没有产生我想要的结果.除非我在 index.html 中包含所有 JS 文件，然后在 PageShow 事件处理程序中编写条件逻辑，这不是一个好的解决方案.

So far, my efforts to do this have not yielded what I am looking for. Unless I include all JS files on index.html and then write conditional logic in the PageShow event handler, which is not a good solution.

有什么想法吗?

推荐答案

要向使用 jQuery Mobile 加载(通过 AJAX)的页面引入新的 JS 包含，您必须在 data-role="中引用这些文件page" 或 (data-role="dialog") 每个页面的元素，因为 jQuery Mobile 在 AJAX 页面加载期间不会处理这些元素之外的任何内容.

To introduce new JS includes to pages loaded (via AJAX) with jQuery Mobile you must have the references to those files within the data-role="page" or (data-role="dialog") elements of each page because jQuery Mobile does not process anything outside of those elements during AJAX page loads.

或者，您可以使用 JavaScript 在每个页面转换的pageshow"事件上动态创建新的 script 标记.像这样:

Alternatively, you could use JavaScript to create the new script tags dynamically on the 'pageshow' event of each page transition. Something like this:

$(document).on('pageshow', 'div[data-role*="page"],div[data-role*="dialog"]', function () {
     (function () {
        var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
        script.src = '/path/to/new/include.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);
    })();
});

这篇关于JQuery Mobile 更改页面不加载 JS 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！