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

因此，我有一个包含指向外部项目页面的链接的页面。这些项目的网页被加载到一个div通过函数：将包含外部javascript文件的外部html文件加载到div

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

这些项目的页面都在左边相同的模板，文字的div和右侧图像股利。我想要做的是包含一个图像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); 
});

首先，我发现在无序列表图像格“ImageBrowser的”内，然后确定在那里我有格“sButtons”中的上一个和下一个按钮下去。同样，所有项目页面都使用与div和列表相同的模板。

我试着在项目页面文件的开头附上<script>标签，并在clickEv(foo)函数中包含.getScript()，将其包含在此slider.js文件中。但是，它似乎没有与第一，我相信这是因为div的imageBrowser和sButtons不存在，但原始的HTML文件内存在吗？如果我再次按下相同的项目页面链接，第二次加载文件，滑块按预期工作。每个项目页面都是一样的，例如我打开project-page1 - 滑块不起作用，我打开project-page2 - 滑块不起作用，我再次打开project-page1 - 滑块作品，我再次打开project-page2 - 滑块作品。如果我现在切换回page1，滑块仍然可以工作，但是如果我打开page3，它不会再工作。

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

//编辑

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

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

来源

2012-04-04 Ilkka Syrjäkari

您应该避免以这种方式动态加载html内容，恕我直言。它会导致太多的头痛和差异。你有没有考虑过放入并使用'iframe'？我知道iframes吸吮，但他们实际上是为加载外部html内容而设计的。 – 2012-04-04 13:57:12

我没想过，但我想我可以试试看。问题是项目页面链接显示在直接位于'loadContent'下的div中，它被设置为'display：none;'。然后将想要的页面带入淡入淡出效果，并且看起来非常清晰，但是我认为iframe是更明智的决定，谢谢。 – 2012-04-04 14:07:49

当然。一个'iframe'可能不适合你（这就是为什么我没有提供它作为答案）。有人可能会更直接地回答你的问题。 – 2012-04-04 14:10:24

如果您有要导入的文件中的JavaScript（原始的JavaScript，而不是一个文件的链接），你可以在脚本标记内EVAL代码如下：

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

我没有已在所有浏览器中进行过测试，但它适用于Chrome和FF。从理论上讲，因为加载的内容已添加到页面，所以在评估脚本之前，它应该可以正常工作。

来源

2012-04-04 14:58:55

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

回答

相关问题