如何动态设置IFrame的来源? [英] How do I dynamically set source of an IFrame?
问题描述
我有一个嵌入YouTube视频的IFrame。我想创建一个文本框,用户(管理员)可以粘贴视频的新src(URL),IFrame获取新的源。以下是我到目前为止:
I have an IFrame embedding a youtube video. I want to create a textbox where user (admins) can paste a new src (URL) of video and the IFrame take the new source. Here is what I have so far:
protected void Edited_Click(object sender, EventArgs e)
{
// HtmlControl frame1 = (HtmlControl)this.FindControl("frame1");
string url = TextBox1.Text;
frame1.Attributes["src"] = url;
}
在html代码中是iframe:
And in the html code is the Iframe:
<div id="video">
<iframe title="YouTube video player" runat="server" width="420"
frameborder="1" style="height: 265px; float: left;
text-align: center;" id="frame1"
name="frame1" align="middle"></iframe>
<br />
</div>
我没有在开头设置任何src但是当我在文本框中粘贴URL并点击时按钮,iframe不显示任何内容。
I don't set any src in the beginning but when I paste a URL in the textbox and hit the button, the Iframe doesn't displays anything.
推荐答案
您需要在客户端浏览器上执行此操作,而不是在服务器端执行此操作。我会建议像:
You need to do this on the client browser, not server-side. I would suggest something like:
// (Add inside script element in head of page html)
window.onload = function() {
document.getElementById('<id of input>').onchange = function() {
changeFrameUrl();
}
};
function changeFrameUrl() {
var inputVal = document.getElementById('<id of input>').value;
document.getElementById('<id of iframe>').src = inputVal;
}
希望这会有所帮助 - 尽管如此,它已经脱离了我的头脑,所以不要如果它第一次不起作用,请告诉我!
Hope this helps - it's off the top of my head though, so don't diss me if it doesn't work first time!
这篇关于如何动态设置IFrame的来源?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!