我可以在加载新页面时加载 js 和 css 并在导航到另一个页面时卸载它吗

Posted 2023-02-26

【中文标题】我可以在加载新页面时加载 js 和 css 并在导航到另一个页面时卸载它吗

【英文标题】：Can i load js and css while loading new page and unload it while navigat to other

【发布时间】：2013-10-09 11:05:51

【问题描述】：

我正在使用 Worklight 6.0 并使用

 WL.Page.load("templates/a.html", 
        onComplete : function() 
          console.log("After fragment is loadded ");
        ,
        onUnload : function() 
          console.log("After fragment is unloadded ");
        
      );  

用于加载新页面并在 onComplete 方法中定义某些功能，并且我在索引页面上拥有与其他页面冲突的所有 css 和 js。我不希望所有css和js都在单个页面上，而不是这个我想在加载新页面时加载它并在加载其他页面时卸载它。 我该怎么做。

【参考方案1】：

WL.Page API 已弃用，请改用 $.load()。 在此处查看培训模块和示例 - http://public.dhe.ibm.com/software/mobile-solutions/worklight/docs/v600/03_02_Building_a_multi_page_application.pdf

【参考方案2】：

仅供参考，WL.Page.Load 在 Worklight V6 中已被弃用，取而代之的是加载片段的原生 javascript 和移动框架方法。

您没有提及您是否使用移动框架，但我使用以下内容为 dojo 移动小部件加载 css：(domConstruct is: "dojo/dom-construct")

var link1 = domConstruct.create("link", 
    type : "text/css",
    rel : "stylesheet",
    href : "js/widget/themes/myCss1.css"
);
var link2 = domConstruct.create("link", 
    type : "text/css",
    rel : "stylesheet",
    href : "js/widget/themes/myCss2.css"
);

var head = document.getElementsByTagName("head")[0];
head.appendChild(link1);
head.appendChild(link2);

对于 jQuery，看起来答案就在这里：Dynamically loading css stylesheet doesn't work on IE

我想您可以将 css 附加到片段而不是文档头，以便在卸载片段时将其卸载。这里有一个关于这是否合法的争论：load external css file in body tag 当然，您可以在加载时将链接附加到头部，并在卸载片段时显式删除它。

如果您使用 dojo mobile 并将 JavaScript 组织到模块中，则无需显式加载 *.js 文件。只需使用 require() 按需加载所需的任何内容。

对于使用 jQuery mobile 的人来说，Require.js (http://requirejs.org) 也有类似的用途。