在 html 中更新 iframe 链接的 href答案

【问题标题】：Update the href of a Iframe link in html在 html 中更新 iframe 链接的 href
【发布时间】：2014-06-04 15:45:15
【问题描述】：

这就是我的情况。我有一个页面HTML 显示YouTube 视频，使用标准iFrame link。我想做的是在我的页面上有一个文本框，人们可以在其中输入视频的 ID，然后视频会使用输入的新链接或视频 ID 重新加载。

代码 HTML：

<p> Type your video's ID here: <input type="text" name="VideoID"></p>

<iframe title="YouTube video player" src="http://www.youtube.com/embed/hqiNL4Hn04A" width="480" height="390" frameborder="0"></iframe></p>

【问题讨论】：

标签： javascript jquery html iframe youtube

【解决方案1】：

您需要在表单中请求视频 ID，例如

<p>
    <form id="getytid">
        <label>Type your video's ID here:</label>
        <input type="text" name="VideoID" />
        <input type="submit" value="go" />
    </form>
</p>
<p>
    <iframe id="theFrame" title="YouTube video player" src="" width="480" height="390" frameborder="0"></iframe>
</p>

注意我们为 form 和 iframe 分配了一个 ID，以便我们可以通过 jQuery 操作它们。

然后您可以使用此代码将 iframe 更新为新的视频 ID：

jQuery(document).ready(function($) {
    $("#getytid").on("submit", function (e) {
        e.preventDefault();
        $("#theFrame").attr("src", "http://www.youtube.com/embed/" + $("input[name=VideoID]").val()+"?autoplay=1")
    }); // on
}); // ready

见JSFIDDLE

注意：

初始 iframe html 没有设置任何 src 属性。您可以将其留空，直到访问者输入 ID，也可以使用默认视频路径填充它

【讨论】：

【解决方案2】：

你应该看看这篇文章，因为我认为这就是你想要的。

dynamically set iframe src

http://jsfiddle.net/MALuP/

<script type="text/javascript">
function iframeDidLoad() {
alert('Done');
}

function newSite() {
var sites = ['http://getprismatic.com',
             'http://gizmodo.com/',
             'http://lifehacker.com/']

document.getElementById('myIframe').src = sites[Math.floor(Math.random() * sites.length)];
}    
</script>
<input type="button" value="Change site" onClick="newSite()" />

【讨论】：

【解决方案3】：

将 youtube 网址保存为变量。

HTML：

<input type="text" name="VideoID" id="youtubevid" />

JS：

var youtube = "http://www.youtube.com/embed/"; // base
var video;
var url;
// set value
$('#youtubevid').on('change', function() { 

video = $('#youtubevid').val();

url = youtube + video;

// set link attribute here in iframe.
//$('#idofiframehere').attr('src', url);
});

【讨论】：