我正在为自己开发一个小扩展。目标很简单，您点击扩展程序，输入一个 youtube 链接，视频就会在您的扩展程序弹出窗口中播放。
这是我的 HTML
<body>
Youtube Link: <input type="text" id="link" name="firstname">
<button type="button" id="do-link"> Go ! </button>
<script src="popup.js"></script>
<p id="write">Here your link</p>
<iframe id="ytplayer" title="YouTube video player" class="youtube-player" type="text/html"
width="640" height="390" src="https://www.youtube.com/watch?v=DTqTs15Hc9w"
frameborder="0" allowFullScreen></iframe>
</body>
还有我的 JS:
var a;
function link() {
a = document.getElementById('link').value;
document.getElementById('ytplayer').src = a;
console.log(a);
}
document.getElementById('do-link').onclick = link;
所以这基本上只是在控制台中打印我的文本框中的内容。它会显示 KSI 视频(或者如果您放置链接，则显示您想要的任何视频。我想知道是否有一种简单的方法可以用用户在文本框中编写的链接替换 youtube 链接？
最佳答案
您可以更改 IFRAME 的 SRC，但您需要使用来自 Youtube 的嵌入 url，而不仅仅是 Youtube 页面的 IFRAME，否则您将遇到跨域错误。
此外，您需要从 Youtube URL 获取视频 ID 并在嵌入的 SRC 中使用它
编辑您的代码:
HTML
`Youtube Link: <input type="text" id="link" name="firstname">
<button type="button" id="do-link"> Go ! </button>
<script src="popup.js"></script>
<p id="write">Here your link</p>
<iframe id="iframe_id" width="640" height="390" src="//www.youtube.com/embed/u1vhQOOZUF4" frameborder="0" allowfullscreen></iframe>`
JS
var a;
function link() {
a = document.getElementById('link').value;
var videoid = youtube_parser(a);
var new_link = "https://www.youtube.com/embed/" + videoid;
document.getElementById('write').innerHTML = new_link;
document.getElementById('iframe_id').src = new_link;
console.log(new_link);
}
document.getElementById('do-link').onclick = link;
function youtube_parser(url){
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
var match = url.match(regExp);
if (match&&match[7].length==11){
return match[7];
}else{
alert("Url incorrecta");
}
}
这是一个工作版本( fiddle ):http://jsfiddle.net/x7mxos14/
关于javascript - 用javascript修改html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25747793/