0

我有几页具有相同的页眉和页脚。我想使用 jQuery 加载函数作为 -

$("#header").load("template.html  #template_h1");   
$("#footer").load("template.html  #template_f1");

我的问题：

  • 这些页面已经包含一个带有 onload 功能的脚本，它将一些 span 标签转换为新格式。
  • 我的页眉和页脚确实使用了这个需要转换的跨度标签。
  • 我无法更改包含的脚本。
  • 我希望我的load()函数在 onload 函数之前运行。

我试图让他们进去，$(document).ready(function()但为时已晚。页眉\页脚中的跨度标签不会被转换。

我可以使用哪个事件？

4

3 回答 3

2

也许你可以保留 onload 函数的引用，做你的事情，然后运行原始的 onload 函数。如果您将它放在正文标记内或将其作为脚本包含在生成初始加载的脚本之后，它应该可以按预期工作。 

var oldOnLoad = window.onload;

window.onload = function() {
   oldOnLoad();
}

编辑为了澄清，您需要oldOnLoad在页眉和页脚下载后调用。

var oldOnLoad = window.onload;
var headerComplete = false, footerComplete = false;

var callOldOnLoad = function() {
    if (headerComplete && footerComplete) {
        oldOnLoad();
    }
}

window.onload = function() {
    $("#header").load("template.html  #template_h1", function() {
        headerComplete = true;
        callOldOnLoad();
    });   
   $("#footer").load("template.html  #template_f1", function() {
        footerComplete = true;
        callOldOnLoad();
    });
}

尚未对此进行测试，但您可能会遇到 DOM 在调用之前没有更新的问题oldOnLoad。所以你可能需要把它放在一个 setTimeout 中。

setTimeout(function() {oldOnLoad();}, 0);
于 2013-01-15T10:11:22.467 回答
2

.load()是异步的，因此无论您多早进行调用，您都不能依赖及时加载的元素。您必须进行.load()同步（即阻止页面直到请求完成），但这是一个糟糕的主意。

这不是模板 IMO 的好方法。此外，在页面看起来正确之前需要完成两个请求，您可能会显着减慢页面加载速度。

如果可能，请从服务器端包含这些模板部分。

于 2013-01-15T10:01:33.207 回答
-1

<body>只需在 HTML 中定义headerandfooter元素之后将代码放入其中。

例子：

<body>
    <div id="header">Foo</div>

    <script type="text/javascript">
        $("#header").load("template.html  #template_h1");
    </script>

    <!-- Other Content -->

    <div id="footer">Bar</div>

    <script type="text/javascript">
        $("#footer").load("template.html  #template_f1");
    </script>
</body>

此外，您可以将 CSS 包含在文件末尾以在代码之后加载 CSS。

于 2013-01-15T10:01:02.877 回答