草庐IT

javascript - Pinterest 和 Fancybox 之间的冲突

coder 2024-07-23 原文

我的页面同时包含 Fancybox 和 Pinterest 图钉按钮。两者似乎都正常工作,但是当我关闭 Fancybox 覆盖时,我看到以下 JavaScript 错误:

Uncaught TypeError: Cannot read property 'data-pin-aha' of null

我的 Pinterest 按钮呈现如下:

<a href="http://pinterest.com/pin/create/button/?url=http://www.mywebsite.com/somepage&amp;media=http://www.mywebsite.com/content/images/2c63a4e0-3b65-4464-934c-77f2a7166090-Dim459X612.jpg&amp;description=some description" class="PIN_1354830754034_pin_it_button PIN_1354830754034_pin_it_beside PIN_1354830754034_hazClick" data-pin-aha="button_pinit" data-pin-config="beside"><span class="PIN_1354830754034_pin_it_button_count" id="PIN_1354830754034_pin_count_0"><i></i>3</span></a>

只是为了好玩,我的 Pinterest 按钮正在与此异步加载:

(function () {
window.PinIt = window.PinIt || { loaded: false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load() {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    if (window.location.protocol == "https:")
        s.src = "https://assets.pinterest.com/js/pinit.js";
    else
        s.src = "http://assets.pinterest.com/js/pinit.js";
    var x = document.getElementsByTagName("script")[0];
    x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
    window.attachEvent("onload", async_load);
else
    window.addEventListener("load", async_load, false);
})();

还有我的 Fancybox 链接:

<a href="//vimeo.com/36573701" class="watch"><span>Watch Our Story</span></a>

总的来说,这是一个非常基本的设置。只是为了好玩,我为 Pinterest 使用了普通的内联脚本标签,但得到了同样的错误。

有没有人见过这个错误并且知道如何修复它?

最佳答案

Pinterest 按钮也有类似的问题。原来是 Pinterest 的 pinit.js 脚本有问题。

我有 reported the issue to Pinterest (sign in required) ,他们正在查看它。

我们在一个页面上使用 Pinterest 按钮,该页面上有另一个链接并分配了点击事件。粗略地说,链接的 HTML 是这样的:

<a href="#" class="youCanClickThis"><span>Select</span></a>

点击事件处理程序是这样的:

$('.youCanClickThis').click(function (e) {
    $(this).html('Selected');
});

此点击处理程序以某种方式导致 pinit.js 出错 ( Uncaught TypeError: Cannot read property 'data-pin-log' of null )。

unminified https://assets.pinterest.com/js/pinit.js为了更容易地跟踪错误。它出现在未缩小的 pinit.js 中的这个函数中:

get: function (b, c) {
    var d = null;
    return d = typeof b[c] === "string" ? b[c] : b.getAttribute(c)
},

具体来说,typeof b[c] . get()getData() 调用,以及 b 的值从所谓的getData() 直接通过.原来是这个函数:

click: function (b) {
    if ((b = a.f.getEl(b || a.w.event)) && b !== a.d.b) {
        if (!a.f.getData(b, "log")) b = b.parentNode;

只要用户点击页面上带有 Pinterest 按钮的任何内容,就会触发此事件。最后一点 - b.parentNode - 是什么导致了我们的问题。

到那时,b已分配给发起单击事件的元素。在我们的例子中,这是 <span><a>里面.但是,由于我们的 JavaScript 替换了 <a> 的内容带有文本的标记,<span>不再是文档的一部分,因此不再有 parentNode .

因此 b = b.parentNode造成b的值为 null .

我们通过不删除 <span> 解决了这个问题从文档中单击。但是,如果 Pinterest 可以添加一个检查以查看是否 b.parentNode 就好了。存在,或者什么的。

(我对 Pinterest 脚本的理解还不够深入,不知道最好的解决方法是什么,但它是在假设点击事件的源始终有一个 parentNode 的情况下构建的,正如本文所展示的那样,不是一个安全的假设)。

关于javascript - Pinterest 和 Fancybox 之间的冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13753523/

有关javascript - Pinterest 和 Fancybox 之间的冲突的更多相关文章

  1. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此

  2. ruby - #之间? Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中,第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

  3. ruby-on-rails - `a ||= b` 和 `a = b if a.nil 之间的区别? - 2

    我正在检查一个Rails项目。在ERubyHTML模板页面上,我看到了这样几行:我不明白为什么不这样写:在这种情况下,||=和ifnil?有什么区别? 最佳答案 在这种特殊情况下没有区别,但可能是出于习惯。每当我看到nil?被使用时,它几乎总是使用不当。在Ruby中,很少有东西在逻辑上是假的,只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false,因为它具有相同的结果,但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行

  4. git使用常见问题(提交代码,合并冲突) - 2

    文章目录git常用命令(简介,详细参数往下看)Git提交代码步骤gitpullgitstatusgitaddgitcommitgitpushgit代码冲突合并问题方法一:放弃本地代码方法二:合并代码常用命令以及详细参数gitadd将文件添加到仓库:gitdiff比较文件异同gitlog查看历史记录gitreset代码回滚版本库相关操作远程仓库相关操作分支相关操作创建分支查看分支:gitbranch合并分支:gitmerge删除分支:gitbranch-ddev查看分支合并图:gitlog–graph–pretty=oneline–abbrev-commit撤消某次提交git用户名密码相关配置g

  5. [工业相机] 分辨率、精度和公差之间的关系 - 2

    📢博客主页:https://blog.csdn.net/weixin_43197380📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正!📢本文由Loewen丶原创,首发于CSDN,转载注明出处🙉📢现在的付出,都会是一种沉淀,只为让你成为更好的人✨文章预览:一.分辨率(Resolution)1、工业相机的分辨率是如何定义的?2、工业相机的分辨率是如何选择的?二.精度(Accuracy)1、像素精度(PixelAccuracy)2、定位精度和重复定位精度(RepeatPrecision)三.公差(Tolerance)四.课后作业(Post-ClassExercises)视觉行业的初学者,甚至是做了1~2年

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - 无法理解 `puts{}.class` 和 `puts({}.class)` 之间的区别 - 2

    由于匿名block和散列block看起来大致相同。我正在玩它。我做了一些严肃的观察,如下所示:{}.class#=>Hash好的,这很酷。空block被视为Hash。print{}.class#=>NilClassputs{}.class#=>NilClass为什么上面的代码和NilClass一样,下面的代码又显示了Hash?puts({}.class)#Hash#=>nilprint({}.class)#Hash=>nil谁能帮我理解上面发生了什么?我完全不同意@Lindydancer的观点你如何解释下面几行:print{}.class#NilClassprint[].class#A

  8. ruby - 在模块/类之间共享全局记录器 - 2

    在许多ruby​​类之间共享记录器实例的最佳(正确)方法是什么?现在我只是将记录器创建为全局$logger=Logger.new变量,但我觉得有更好的方法可以在不使用全局变量的情况下执行此操作。如果我有以下内容:moduleFooclassAclassBclassC...classZend在所有类之间共享记录器实例的最佳方式是什么?我是以某种方式在Foo模块中声明/创建记录器还是只是使用全局$logger没问题? 最佳答案 在模块中添加常量:moduleFooLogger=Logger.newclassAclassBclassC..

  9. ruby - 在两个 ActiveRecord 类之间合并/复制属性的好方法? - 2

    之前有人问过这个问题,我发现了以下clip关于如何一次设置一个类对象的所有属性,但由于批量分配保护,这在Rails中是不可能的。(例如,您不能Object.attributes={})有没有一种很好的方法可以将一个类的属性合并到另一个类中?object1.attributes=object2.attributes.inject({}){|h,(k,v)|h[k]=vifObjectModel.column_names.include?(k);h}谢谢。 最佳答案 利用assign_attributes使用:without_prote

  10. ruby-on-rails - 2个用户之间的产品订单 - 2

    我有三个模型:User、Product、Offer以及这些模型之间的关系问题。场景:用户1发布了一个产品用户2可以向用户1发送报价,例如10美元用户1可以接受或拒绝提议我现在的问题是:用户、产品和报价之间的正确关系是什么?我如何处理那些“接受或拒绝”操作?是否有更好的解决方案?用户模型:classUser:productsend产品型号:classProduct:usersend提供模型:classOffer提前致谢:)编辑:我正在使用Rails3.2.8 最佳答案 警告:小小说来了第1部分:设置关联我建议阅读Railsguideo

随机推荐