[A] 我用的是极品Highslide用于打开模态窗口的脚本(通过其内置的 AJAX 功能)。
[B] 所以我将使用“main”来指代顶部/主页，并使用“insert”来描述插入到“main”中的页面。
[C] 正在加载到 Highslide 窗口的“插入”页面包含 4 个外部脚本，我必须在扩展模态时运行这些脚本。
[D] 脚本包含在“插入”页面的底部——就在 </body> 之前标记——因为 AJAX 模式导致 Highslide 忽略 <head>部分。
[E] 所以我的脚本看起来像这样:
<script src="/js/jquery-1.7.1.min.js"></script>
<script src="/js/jQuery.thumbfx.js"></script>
<script src="/js/jQuery.easing.js"></script>
<script src="/js/jquery.masonry.min.js"></script>
<script>
$(function(){var $container = $('#IMAGES');$container.imagesLoaded( function(){$container.masonry({itemSelector : '.BLOCK',columnWidth: 200,isFitWidth: true,gutterWidth: 0});});});
</script>
</body>
[F] Highslide 在“主”页面的头部激活——通过包含下面的代码，它应该在模式窗口被获取和扩展时触发这些脚本。
hs.Expander.prototype.onAfterExpand = function() {
var scripts = this.content.getElementsByTagName('script');
for (var i = 0; i < scripts.length; i++) {
eval(scripts[i].innerHTML);
}
};
[G] 问题有两个... 第一: 我似乎无法激活所有脚本。 Masonry 在这种情况下工作得很好，但我根本无法让 ThumbFX 工作。 第二:在尝试解决这个问题时，我发现 eval() 是邪恶的，应该像狂热的僵尸一样避免它。
问题:有没有更好(更安全)的函数可以在 hs.Expander.prototype.onAfterExpand 上运行？事件——也许是一个对所有脚本都有效的事件？
谢谢。
编辑: 顺便说一下...我的路径是正确的，当我直接转到“插入”页面时，我可以让所有脚本完美地工作。但是，当“插入”页面由 Highslide 使用 AJAX 时，只有 Masonry 才能工作。再次感谢。
最佳答案
下面的代码只会读取 Highslide ajax 弹出窗口中的脚本 block ，不会包含 JavaScript 文件。这就是 Masonry 工作而 ThumbFx 不工作的原因，因为 Masonry 的代码放在脚本 block 中。 Masonry 的脚本文件选自主页中包含的文件(jquery-1.6.1.min.js 和 jquery.masonry.min.js)。
hs.Expander.prototype.onAfterExpand = function () {
var scripts = this.content.getElementsByTagName('script');
for (var i = 0; i < scripts.length; i++) {
eval(scripts[i].innerHTML);
}
};
在 Highslide ajax 弹出窗口中没有 JavaSript block 的解决方案:
您可以直接从 onAfterExpand 事件调用函数，而不是在“插入”页面中使用脚本 block 。所有必需的 JavaScript 文件都必须包含在 main 页面的 header 部分。您从 ThumbFx 的作者处获得的代码要求主页中的所有打开 anchor 都具有唯一 ID，因此我们可以使用 onAfterExpand 中的代码将打开 anchor 与正确的“插入”页面绑定(bind)在一起> 事件。
带有 ID 的 HTML 标记:
<a id="link1" href="insert-page/image/1/" rel="highslide-ajax" class="BLOCK">
<img src="thumbs/image1.jpg" alt="" /></a>
<a id="link2" href="insert-page/image/2/" rel="highslide-ajax" class="BLOCK">
<img src="thumbs/image2.jpg" alt="" /></a>
调用onAfterExpand事件中的函数(需要highslide-full.js):
hs.Expander.prototype.onAfterExpand = function () {
// for jQuery Masonry
var $container = $('#IMAGES');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.BLOCK',
columnWidth: 200,
isFitWidth: true,
gutterWidth: 0
});
});
// for ThumbFx
if (this.a.id == 'link1') {
$.ajax({
url: "insert-page/image/1/",
context: document.body
}).done(function () {
$('[data-overlayer]').overlayer();
});
}
if (this.a.id == 'link2') {
$.ajax({
url: "insert-page/image/1/",
context: document.body
}).done(function () {
$('[data-overlayer]').overlayer();
});
}
// add more calls for ThumbFx here
};
在 Highslide ajax 弹出窗口中使用 JavaScript block 的解决方案:
将此代码与您的 highslide 设置一起放在主页中(需要 highslide-full.js):
hs.Expander.prototype.onAfterExpand = function () {
var scripts = this.content.getElementsByTagName('script');
for (var i = 0; i < scripts.length; i++) {
eval(scripts[i].innerHTML);
}
};
这也需要在主页面中包含必要的JavaScript文件，但不需要在主页面中为打开的 anchor 添加ID。
将脚本 block 放在“插入”页面的 body 标签中:
<script>
$(function () {
// for jQuery Masonry
var $container = $('#IMAGES');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.BLOCK',
columnWidth: 200,
isFitWidth: true,
gutterWidth: 0
});
});
// for ThumbFx
$.ajax({
context: document.body
}).done(function () {
$('[data-overlayer]').overlayer();
});
});
</script>
关于javascript - 触发嵌套在 AJAX 页面中的多个 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14829394/