Question

所以我有一个页面，其中包含指向外部项目页面的链接。这些项目页面通过函数加载到div中：

function clickEv(foo) {
    $('#loadContent').load('sub/'+foo+'.html').fadeIn('fast');
    window.location.hash = foo;
}

这些项目页面都有相同的模板，左边是text-div，右边是图像div。我想要做的是包括image-div的滑块。此滑块是外部JavaScript文件：

$(function() {
var sliderUL = $('.imageBrowser').children('ul'),
    imgs = sliderUL.find('img'),
    imgWidth = imgs[0].width, 
    imgsLen = imgs.length, 
    current = 1,
    totalImgsWidth = imgsLen * imgWidth;

$('#sButtons').find('div').on('click', function() {
    var direction = $(this).data('dir'),
        loc = imgWidth;

    // update current value
    ( direction === 'next' ) ? ++current : --current;

    // if first image
    if ( current === 0 ) {
        current = imgsLen;
        loc = totalImgsWidth - imgWidth;
        direction = 'next';
    } else if ( current - 1 === imgsLen ) {
        current = 1;
        loc = 0;
    }

    transition(sliderUL, loc, direction);
});

首先，我在div'imageBrowser'中找到无序列表中的图像，然后确定我在div'suttons'中的prev和next按钮的位置。同样，所有项目页面都使用与div和列表相同的模板。

我尝试将此slider.js文件包含在项目页面文件开头的<script>标记中，并在初始.getScript()中包含clickEv(foo)功能。但是，它似乎不适用于第一个.load()，我相信这是因为div的imageBrowser和sButton还没有存在于原始的html文件中？如果我再次按相同的项目页面链接，第二次加载文件，滑块按预期工作。每个项目页面都是一样的，例如我打开project-page1 - 滑块不起作用，我打开project-page2 - 滑块不起作用，我再次打开project-page1 - 滑块工作，我再次打开project-page2 - 滑块工作。如果我现在切换回page1，滑块仍然有效但如果我打开page3则它不再起作用。

我是在尝试一些不可行的事情或者我做错了什么？

//编辑

我认为我现在已经开始工作，问题是脚本在内容加载之前就已经执行了。因此，试图从元素中获取信息的变量仅在从缓存中加载时才开始工作。

我所做的是将onload="$.getScript('src/slider.js')"添加到项目页面中的第一个<img>文件中。因此，脚本在加载所需元素后执行！感谢所有人，我仍然会因为性能而考虑iframe。

Answer 1

如果您在导入的文件中包含javascript（原始javascript，而不是文件的链接），您可以按如下方式评估脚本标记中的代码：

var scripts = document.getElementByTagId("loadContent").getElementsByTagName("script");
for(i = 0; i < scripts.length; i++){
  eval(scripts[i].innerHTML);
}

我没有在所有浏览器中测试过，但它适用于Chrome和FF

理论上，因为加载的内容已经添加到页面中，所以在评估脚本之前它应该可以正常工作。

将包含外部javascript文件的外部html文件加载到div

1 个答案: