0

我想将外部文件中的资产（使用ajax）加载到容器div中。这些在看起来像这样的对象的 json 列表中被引用。

  "pages": {
    "page1": {
      "html": "markup/page1.html",
      "css": "style/css/pages/page1.css",
      "js": "scripts/pages/page1.js"
    },
    "page2": {
      "html": "markup/page2.html",
      "css": "style/css/page2.css",
      "js": "scripts/page2.js"
    },

  }

基本上，这是一个美化的幻灯片放映，用户可以单击下一步并转到下一张幻灯片/页面。但我正在努力加载每个元素和相关的资产，以及使用 jquery 更改哈希。

预先感谢您的帮助

4

1 回答 1

0

首先，让html直接包含css和js文件，这样你只需要处理一个文件。

其次，你可以...

为容器 div 使用 iframe 并加载它

$("#container").attr('src', url);

使用 ajax 调用来获取内容，并将其放在 div 中，就像这样......

$.ajax({
        type: "GET",
        url: url,
        dataType: "html",
        success: function(html) {
            $("#container").html(html);

        },
        error:function (xhr, ajaxOptions, thrownError){
                    alert("Failed to load page!\n" + xhr.status + "\n" + thrownError);
        }
    });

如果您的所有 css 和 js 文件都预先加载，则使用第二个选项会更好，但是如果您单独加载它们并且担心它们可能会发生冲突，那么 iframe 将是更安全的方式，因为我不认为更改 div HTML 将卸载不再需要的任何 css 或 js 文件。

于 2013-01-31T07:02:28.920 回答