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

Question

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

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

这些项目页面都有相同的模板，左侧是文本分区，右侧是图像分区。 我想要做的是为 image-div 包含一个 slider。 这个 slider 是一个外部 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“sButtons”内的上一个和下一个按钮的位置。 同样，所有项目页面都使用带有 div 和列表的相同模板。

我已经尝试通过在项目页面文件的开头附加<script>标签以及通过在初始clickEv(foo) function 中包含.getScript()来包含这个 slider.js 文件。但是，它没有似乎无法与第一个.load()一起使用，我相信这是因为原始 html 文件中尚不存在 div 的 imageBrowser 和 sButtons？ 如果我再次按下相同的项目页面链接，第二次加载文件，slider 将按预期工作。 每个项目页面都是一样的，例如我打开项目页面 1 - slider 不起作用，我打开项目页面 2 - slider 不起作用，我再次打开项目页面 1 - slider 工作，我打开项目页面 2再次 - slider 有效。 如果我现在切换回第 1 页，slider 仍然有效，但如果我打开第 3 页，它就不再有效了。

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

// 编辑

我想我现在可以正常工作了，问题是脚本在内容加载之前就被执行了。 因此，试图从元素中获取信息的变量只有在从缓存中加载时才开始工作。

我所做的是将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

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