2

[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 才能工作。再次感谢。

4

1 回答 1

0

下面的代码只会读取Highslide ajax 弹出窗口中的脚本块，不包括 JavaScript 文件。这就是 Masonry 有效而 ThumbFx 无效的原因，因为 Masonry 的代码被放置在脚本块中。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 块的解决方案：
您可以直接从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 弹出窗口中使用 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>
于 2013-02-13T20:23:16.507 回答