Question

我在彩盒中打开一些HTML内容，并且正在通过Ajax调用填充数据。对于某些情况，它的工作正常，但在少数情况下，弹出窗口会变形。我知道这是什么原因，但不知道如何解决这个问题。最初我想在我的$.fn.colorbox.resize();方法中添加ajaxComplete，但这不能按预期工作。

在做了一些调试之后，我发现问题在于使用AddThis社交共享插件。我也在使用AddThis社交共享插件，这个插件在使用Ajax调用时有一些已知问题。如果我们通过Ajax加载内容并使用AddThis加载内容，我们需要重新初始化AddThis插件。

因此，为了使AddThis起作用，我必须在我的JSP文件中添加以下代码，该文件用于加载Ajax内容。此JS代码是内联的，并且将在使用Ajax

加载此JSP页面内容时触发

<script type="text/javascript">
var addthis_config = addthis_config||{};
addthis_config.pubid = '${addThisPubId}';
$.getScript( "https://s7.addthis.com/js/300/addthis_widget.js?domready=1#pubid=${addThisPubId}");
$(function () {addthis.init();
});
</script>

使用上面的代码AddThis工作正常。由于上面的代码正在尝试重新初始化其AddThis脚本，因此在AddThis finsih加载内容之前会显示弹出内容，一旦AddThis完成其工作，就调用$.fn.colorbox.resize()为时已晚。

在$.fn.colorbox.resize()完成加载内容后，我有什么办法可以致电AddThis

Answer 1

您可以使用AddThis JavascriptEvents，在addthis初始化准备就绪时尝试registering an Event Listener。

// Invoked when the AddThis API is ready
function addthisReady(evt) {
    $.fn.colorbox.resize();
}

// Listen for the ready event
addthis.addEventListener('addthis.ready', addthisReady);

通过Ajax加载内容后调整颜色框的大小

1 个答案: