2015-11-23 50 views
0

UPDATE: 我用https://github.com/kennethreitz/flask-sslify/固定的HTTPS和HTTP protocal不匹配的错误,但我仍然得到这个错误:Facebook共享对话框不显示正确的内容

未捕获的SecurityError:无法从阅读“contentDocument”属性'HTMLIFrameElement':阻止了一个来源为“https://infinite-brushlands-3960.herokuapp.com”的框架访问源于“https://www.facebook.com”的框架。被访问的帧将“document.domain”设置为“facebook.com”,但请求访问的帧没有。两者都必须将“document.domain”设置为相同的值以允许访问。

该错误消息对Chrome来说是唯一的,但弹出消息与调试器中显示的内容不匹配的行为在所有浏览器中都是一致的。


我想让我的网站的Facebook分享按钮插件提示用户使用正确的共享窗口属性。我在我的网站上有一个按钮(我正在使用的登台版本可以在这里找到:http://infinite-brushlands-3960.herokuapp.com/),它显示“共享此时间表”,一旦点击该按钮,就会生成一个独特的共享按钮。

下面是我的FB的JavaScript SDK,我需要,这是开放body标签后立即放置的指示代码:

<script> 
    window.fbAsyncInit = function() { 
     FB.init({ 
      appId  : 'myAppIDGoesHere', 
      xfbml  : true, 
      version : 'v2.5' 
     }); 
    }; 

    (function(d, s, id){ 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) {return;} 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_US/sdk.js"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
</script> 

而这里的“共享此计划”按钮的代码:

// When 'Share This Schedule' is clicked: 
$('#share_schedule').click(function(){ 
    html2canvas(document.body).then(function(canvas) { 
     //document.body.appendChild(canvas); 
     var imgDataUrl = canvas.toDataURL(); 
     $('head').append("<meta property='og:image' content='" + imgDataUrl + "' />"); 
    }); 

    // If it is not the first time being clicked: 
    if ($('#share_url_ul').children().length >= 1){ 
     $('#share_url_ul').empty(); 
    } 
    $.ajax({ 
     method: "POST", 
     url: "/share/", 
     data: JSON.stringify(localStorage), 
     contentType: "application/json; charset=utf-8", 
     dataType: "text", 
     success: function(response){ 
      var shared_url = document.createElement('a'); 
      $(shared_url).css('display', 'block'); 
      $(shared_url).attr('href', window.location.href + 'shared/' + response); 
      $(shared_url).attr('id', 'share_link'); 
      shared_url.innerHTML = window.location.href + 'shared/' + response; 
      $('#share_url_ul').append(shared_url); 

      $('#fb_share_btn').attr('data-href', window.location.href + 'shared/' + response); 

      FB.XFBML.parse(); 
     }, 
     error: function(error){ 
      console.log(error); 
     } 
    }); 
}); 

而且我的html:

<head> 
    . 
    . 
    . 
    <!-- Facebook --> 
    <meta property="og:url"    content="http://infinite-brushlands-3960.herokuapp.com/" /> 
    <meta property="og:type"    content="website" /> 
    <meta property="og:title"    content="My Schedule on Serif" /> 
</head> 

当我去URL Debugger通过this article的指示,我看到的正是我想看到的,用正确的提示属性:The correct prompt properties

但在实际的网站,这不是我所看到的: enter image description here

为什么会出现这种差异存在?

附加信息:

我有一种感觉,它可能有一些做的事实,我得到了负载控制台此消息:

未捕获的SecurityError:无法读取“contentDocument”来自'HTMLIFrameElement'的属性:阻止了源自“http://infinite-brushlands-3960.herokuapp.com”的帧访问源自“https://www.facebook.com”的帧。请求访问的帧具有“http”的协议,被访问的帧具有“https”的协议。协议必须匹配。

我也尝试使用FB.ui Share Dialog而不是共享插件,但它只是打开一个弹出窗口,其中包含上述错误。

回答

0

如果我正确理解您的用例,您希望单独分享每个计划,对吧?

目前,og:url值指向您的主页(https://infinite-brushlands-3960.herokuapp.com/)。这将导致打开图表刮刀(和共享对话框刮擦)跟随该URL,因为它被认为是规范的URL。我建议在那里使用每个时间表的网址。

将此与manual rescrapes结合起来,您的Open Graph数据应始终保持最新状态。

相关问题