如何动态设置IFrame的源

本文关键字：设置 IFrame 的源 动态 何动态 | 更新日期: 2023-09-27 18:28:35

我有一个嵌入youtube视频的IFrame。我想创建一个文本框，用户（管理员）可以在其中粘贴视频的新src（URL），IFrame获取新的源。以下是我目前所拥有的：

protected void Edited_Click(object sender, EventArgs e)
    {
       // HtmlControl frame1 = (HtmlControl)this.FindControl("frame1");
        string url = TextBox1.Text;
        frame1.Attributes["src"] = url;
    }

在html代码中是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不会显示任何内容。

如何动态设置IFrame的源

其他回答没有回答这个问题，它们提供了一个替代方案。问题是如何从C#设置iFrame src。我在这里回答。

我完全支持"适合这份工作的工具"，我自己也经常使用这句口头禅——但只有在其他工具"错误"的时候。这在这里还没有确立。有人能提供一个很好的技术理由说明为什么不应该在代码背后这样做吗？

我认为@Pepys遇到的问题可能是由于URL中的某些内容，而他还没有提供。例如，他的URL可能包含需要转义的"与"或其他字符。

以下代码对我来说很好：

excelframe.Attributes["src"] =
  @"https://r.office.microsoft.com/r/rlidExcelEmbed?"
+ @"su=-0000000000"
+ @"&Fi=zzzzzzzzzzzz!111"
+ @"&ak=x%3d9%26x%3d9%26x%3d!zzzzzzzzzz"
+ @"&kip=1"
+ @"&AllowTyping=True"
+ @"&ActiveCell='sheet1'!C3"
+ @"&wdHideGridlines=True"
+ @"&wdHideHeaders=True"
+ @"&wdDownloadButton=True";

您需要在客户端浏览器上执行此操作，而不是在服务器端。我建议：

// (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;
}

希望这能有所帮助——不过这是我的想法，所以如果第一次不起作用，不要诋毁我！

相关文章：