1

所以我有一个页面，其中包含指向外部项目页面的链接。这些项目页面通过一个函数加载到一个 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 'sButtons' 中的 prev 和 next 按钮确定我要去哪里。同样，所有项目页面都使用带有 div 和列表的相同模板。

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

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

// 编辑

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

我所做的是添加onload="$.getScript('src/slider.js')"到<img>项目页面中的第一个文件中。因此，在加载了所需的元素后，脚本就会被执行！感谢大家，由于性能原因，我仍然会考虑使用 iframe。

4

1 回答 1

1

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

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

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

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

于 2012-04-04T14:58:55.167 回答