触发AJAX页面中嵌套的多个java脚本

Triggering multiple javascripts nested inside AJAX page

本文关键字：java 脚本 嵌套 AJAX 触发      更新时间：2023-09-26

[A]我正在使用出色的Highslide脚本打开模式窗口（通过其内置的AJAX功能）。

[B] 因此，我将使用"main"来指代首页/主页，并使用"insert"来描述插入"main"的页面。

[C] 加载到Highslide窗口中的"insert"页面包含4个外部脚本，我必须在模态展开时运行这些脚本。

[D] 由于AJAX模式导致Highslide忽略<head>部分，因此脚本包含在"insert"页面的底部，即</body>标记之前。

[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弹出窗口内的脚本块，而不读取包含的JavaScript文件。这就是为什么Masonry有效而ThumbFx无效的原因，因为Masonry的代码被放置在脚本块中。Masonry的脚本文件是从主页中包含的文件中挑选出来的（jquery-1.6.1.min.js和jquery.monry.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块的解决方案：
您可以直接从onAfterExpand事件调用函数，而不用在"插入"页面中使用脚本块。所有必要的JavaScript文件都必须包含在main页面的头部。您从ThumbFx的作者那里得到的代码要求主页中的所有打开锚都有一个唯一的ID，这样我们就可以将带有正确"插入"页面的打开锚与onAfterExpand事件中的代码联系在一起

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块的解决方案：
将此代码与您的高滑设置一起放在主页中（需要高滑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文件，但不需要向主页中的打开锚添加ID
将脚本块放在"插入"页面的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>
相关文章：