动态更改元数据/元标签的 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9231845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript To Change Metadata / Metatags Dynamically
提问by dougmacklin
I'll describe what I'm trying to accomplish and if it seems that my method is dumb please feel free to let me know:
我将描述我想要完成的任务，如果我的方法看起来很愚蠢，请随时告诉我：
I have a page with a video gallery and a flash video player iframe. When the user clicks on a video thumbnail, it starts to play in the frame.
我有一个带有视频库和 Flash 视频播放器 iframe 的页面。当用户单击视频缩略图时，它开始在帧中播放。
Users can also go to the page with a specific video loaded into the iframe by appending the filepath to the end of the url - blabla.com/videogallery?videofilepath. I set this up so that videos could be shared easily.
用户还可以通过将文件路径附加到 url 末尾来访问特定视频加载到 iframe 的页面 - blabla.com/videogallery?videofilepath。我进行了设置，以便可以轻松共享视频。
I want to be able to add Share buttons for facebook/twitter, but I cannot get them to work and present themselves properly with the correct metadata (image and title).
我希望能够为 facebook/twitter 添加共享按钮，但我无法让它们工作并使用正确的元数据（图像和标题）正确呈现自己。
So I was thinking of putting the Share buttons in the player iframe as well and then update the metadata tags dynamically when a video change occurs, but am unsure as to how to go about this.
因此，我正在考虑将“共享”按钮也放在播放器 iframe 中，然后在发生视频更改时动态更新元数据标签，但我不确定如何进行此操作。
Any help would be much appreciated, thanks.
任何帮助将不胜感激，谢谢。
回答by Downpour046
You wanna do something like this in the code for jQuery
你想在 jQuery 的代码中做这样的事情
$(document).ready(function(){
$('title').text("Your new title tag here");
$('meta[name=description]').attr('content', 'new Meta Description here');
});
回答by Sahith Vibudhi
As the above two solutions are using JQuery, here is a solution in pure javascript, incase if anyone is looking for:
由于上述两个解决方案使用的是 JQuery，这里是一个纯javascript的解决方案，以防万一有人在寻找：
to change the title:
更改标题：
<script>document.title = "this is title text";</script>
to change any meta tag:
更改任何元标记：
<meta name="description" content="this is old content which we are going to change through javascript">
javascript code to change the above metatag.
用于更改上述元标记的 javascript 代码。
<script>
var allMetaElements = document.getElementsByTagName('meta');
//loop through and find the element you want
for (var i=0; i<allMetaElements.length; i++) {
if (allMetaElements[i].getAttribute("name") == "Description") {
//make necessary changes
allMetaElements[i].setAttribute('content', "description you want to include");
//no need to continue loop after making changes.
break;
}
}
Good luck.
祝你好运。
回答by bernabas
you can add anything in the head tag by using the this (jquery)
您可以使用 this (jquery) 在 head 标记中添加任何内容
$('head').append('<meta .... />');
回答by Eadz
Shorter answer in pure javascript.
纯 javascript 中更简短的答案。
document
.getElementsByTagName('meta')
.namedItem('description')
.setAttribute('content','My Meta Description Here')
回答by Eadz
@bernabas's answer in plain ol' JavaScript:
@bernabas 在纯 ol' JavaScript 中的回答：
document.head.textContext += '<meta ... />'