如何动态设置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屋！