javascript - Pinterest javascript SDK pinOne 弹出对话框的方法

Question

下午好

语境

我们正在使用 Pintrest JavaScript SDK 弹出一个对话框以将某些内容固定在 Pinterest 上。

要求

我们希望弹出对话框显示在屏幕中央。

问题

目前它正在运行，但对话框出现在错误的位置。

代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 $.getScript('https://assets.pinterest.com/js/pinit.js', function () {
  var pinObj = {
  url: url,
  media: ogImg.attr("content")
};
                
pinObj.description = 'description';
                
PinUtils.pinOne(pinObj);

问题

有没有办法让 pinOne() 方法以屏幕为中心弹出对话框？

问候，

马丁·欧梅特

Answer 1

所以您似乎是从 Widgets API here 中引用它.

为了回答您的问题，我认为没有一种方法可以告知在哪里 打开对话框。这通常很难，因为根据屏幕尺寸甚至分辨率，很难确定“居中”的定义位置。

查看pinOne的源码

            pinOne: function(a) {
                if (a.href) {
                    var b = e.f.parse(a.href, {
                        url: !0,
                        media: !0,
                        description: !0
                    });
                    b.url && b.url.match(/^http/i) && b.media && b.media.match(/^http/i) ? (b.description || (e.f.log("&type=config_warning&warning_msg=no_description&href=" + encodeURIComponent(e.d.URL)), b.description = e.d.title), e.w.open(a.href, "pin" + (new Date).getTime(), e.a.pop.base.replace("%dim%", e.a.pop.small))) : (e.f.log("&type=config_error&error_msg=invalid_url&href=" + encodeURIComponent(e.d.URL)), e.f.util.pinAny())
                } else a.media ? (a.url || (e.f.log("&type=config_warning&warning_msg=no_url&href=" + encodeURIComponent(e.d.URL)), a.url = e.d.URL), a.description || (e.f.log("&type=config_warning&warning_msg=no_description&href=" + encodeURIComponent(e.d.URL)), a.description = e.d.title), e.f.log("&type=button_pinit_custom"), a.href = e.v.config.pinterest + "/pin/create/button/?guid=" + e.v.guid + "&url=" + encodeURIComponent(a.url) + "&media=" + encodeURIComponent(a.media) + "&description=" + encodeURIComponent(a.description), e.w.open(a.href, "pin" + (new Date).getTime(), e.a.pop.base.replace("%dim%", e.a.pop.small))) : (e.f.log("&type=config_error&error_msg=no_media&href=" + encodeURIComponent(e.d.URL)), e.f.util.pinAny());
                a.v && a.v.preventDefault ? a.v.preventDefault() : e.w.event.returnValue = !1
            },

为您提供的唯一真正的自定义选项包括 url、media 和 description。似乎真的没有任何方式可以“以中心为中心”进行交流。

话虽如此，我认为这只是他们的 Widget API 的一个限制。如果您正在对特定的 pinterest 链接进行硬编码，您可能只需创建自己的链接并传入 windowFeatures 即可。我在下面尝试过，它“有点”有效(可能需要调整确定位置的逻辑。

document.getElementById('pinterest-link').addEventListener('click', function(e) {
  var URL = e.target.getAttribute('data-pin-myownlink');
  // assuming you want a 450x450 popup
  
  var w = 450;
  var h = 450;

  // plagiarized from http://www.nigraphic.com/blog/java-script/how-open-new-window-popup-center-screen
  var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.availLeft;
  var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.availTop;
  width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
  height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

  var left = ((width / 2) - (w / 2)) + dualScreenLeft;
  var top = ((height / 2) - (h / 2)) + dualScreenTop;

  window.open(URL, "Pinterest Link", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+width+', height='+height+', top='+top+', left='+left);
});

<a id="pinterest-link" href="#" data-pin-myownlink="https://www.pinterest.com/pin/create/button/?guid=Nsp1JckZPYuE-6&url=https%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=https%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">Click here</a>

StackOverflow 禁用弹出窗口，所以这是一个 jsFiddle