使用JS/JQuery更改點擊/共享的元描述？

我有一個看起來像這樣的各種元素的頁面：使用JS/JQuery更改點擊/共享的元描述？

產品標題1
產品圖片1
產品說明1
分享1鏈路
產品標題2
產品圖片2
產品描述2
分享2鏈接
產品標題3
產品圖片3
產品描述3
分享3鏈路

我希望它這樣，當用戶想要根據用戶正在共享的內容來共享該產品，即OG元素元素髮生變化。因此，例如，該頁面可能具有「某些產品給你」的元描述，但是當用戶分享產品2時，描述將變爲「產品2的描述」。與圖片/標題/等一樣。

我有以下的概念證明我已經放在一起形成其他線程在這裏，但它不起作用。那麼，標題部分會改變，但元數據不會。

這裏最大的挑戰是，一個要求是，這種在HTML和JS/jQuery來完成 - 沒有PHP，ASP沒有等

<!DOCTYPE html> 

<head> 
<title>This title is not exciting</title> 
<meta id="mtdesc" name="description" content="" /> 
<meta property="og:title" content=""/> 
<meta property="og:image" content=""/> 
<meta property="og:site_name" content=""/> 
<meta property="og:description" content=""/> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script> 
</head> 

<body> 
<button>Change description</button> 
<script type='text/javascript'> 
$('button').on('click', function() { 
    // Just replacing the value of the 'content' attribute will not work. 
    $('meta[property="og:title"]').remove(); 
    $('meta[property="og:description"]').remove(); 
    $('meta[property="og:url"]').remove(); 
    $("head").append('<meta property="og:title" content="blubb1">'); 
    $("head").append('<meta property="og:description" content="blubb2">'); 
    $("head").append('<meta property="og:url" content="blubb3">'); 
    $("#mtdesc").attr("content","music all the time"); 
    $(document.title = "Now I've changed it"); 
}); 

</script> 
</body>

來源

2014-06-19 mghurston

你說「剛剛更換的價值'content'屬性不起作用。「。爲什麼？

下面是一個例子 -

$('button').click(function() {  
    $('meta[property="og:title"]').attr('content', 'foo'); 
});

我已經設置元標記foo的內容屬性。無需刪除和追加。

來源

2014-06-19 17:13:03

代碼中的註釋實際上來自寫這個例子的人。當我查看源代碼時，我必須做些錯誤，元信息沒有改變 - 有沒有一種方法可以讓我測試它，以便我可以看到元數據正在傳遞？也許從瀏覽器查看源代碼不是正確的方法。 – mghurston

查看源代碼不正確，因爲源代碼是從服務器發送到瀏覽器的。要查看更改，必須在瀏覽器的開發人員工具中使用DOM檢查器。如果您從未見過這些，只需在瀏覽器關注焦點時單擊F12即可。 –

使用JS/JQuery更改點擊/共享的元描述？

回答

相關問題