Question

[A]我正在使用精彩的Highslide脚本打开一个模态窗口（通过其内置的AJAX功能）。

[B]所以我将使用'main'来引用顶部/主页面和'insert'来描述插入'main'的页面。

[C]加载到Highslide窗口中的'insert'页面包含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在'main'页面的头部被激活 - 通过包含下面的代码，它应该在获取和扩展模态窗口时触发这些脚本。

hs.Expander.prototype.onAfterExpand = function() {
    var scripts = this.content.getElementsByTagName('script');
    for (var i = 0; i < scripts.length; i++) {
        eval(scripts[i].innerHTML);
    }
};

[G]问题有两个...... 第一：我似乎无法激活所有脚本。在这种情况下，砌体工作得很好，但我根本无法使用ThumbFX。 第二：在尝试解决这个问题时，我发现eval（）是邪恶的，它应该像狂热的僵尸一样避免。

问题：我可以在hs.Expander.prototype.onAfterExpand事件中运行一个更好（更安全）的函数 - 也许一个实际上适用于所有脚本的函数？

谢谢。

编辑：顺便说一句......我的路径是正确的，当我直接进入“插入”页面时，我可以让所有脚本完美地工作。但是当Highslide的“插入”页面是AJAX时，只有Mason工作。再次感谢。

Answer 1

以下代码只会读取Highslide ajax弹出窗口中的脚本块，不包含的JavaScript文件。这就是砌体工作而ThumbFx没有的原因，因为砌体的代码放在脚本块中。从主页（jquery-1.6.1.min.js和jquery.masonry.min.js）中包含的文件中挑选Masonry的脚本文件。

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 popup中没有JavaSript阻止的解决方案：
您可以直接从onAfterExpand事件调用函数，而不是使用“插入”页面中的脚本块。所有必需的JavaScript文件必须包含在主页面的head部分中。您从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 popup中的JavaScript阻止解决方案：
将此代码与您的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文件，但您不需要在主页面的开始锚点中添加ID。
将脚本块放在“插入”页面的正文标记中：

<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>

触发嵌套在AJAX页面内的多个javascripts

1 个答案: