2015-11-23 49 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數據應始終保持最新狀態。

相關問題