在保持跨浏览器兼容性的同时动态设置 iframe 的 Src 属性答案

【问题标题】：Dynamically Setting the Src Attribute of an Iframe while maintaining Cross-Browser Compatibility在保持跨浏览器兼容性的同时动态设置 iframe 的 Src 属性
【发布时间】：2023-03-13 03:10:01
【问题描述】：

我将创建一个 Iframe，它必须动态更新其内容（通过 src 属性 - 每次单击不同按钮时，Iframe 都会更改其位置）以播放我公司创建的不同 youtube 视频。问题是我看到你可以使用 jquery 来实现这一点。我现在对jquery一无所知，但需要时间来学习它。现在，我需要一个答案。如何使用 Jquery（或任何替代的浏览器友好方法）来更改我的 iframe 的 src 属性？

<script runat="server">

</script>
<div style="margin-left:auto;margin-right:auto">
    <table style="width: 960px" cellpadding="0px" cellspacing="0px">
        <tr>
            <td rowspan="6">
                <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/JZOxqVl5oP4"
                    frameborder="0" allowfullscreen id="VideoPlayer"></iframe>
            </td>
            <td style="Width: 130px">
                <img width="130px" src="./Images/Video_Logos/l_absa.gif" />
            </td>
...

请注意，有 10 个按钮。按钮是图像，我打算为不同的视频调用不同的“方法”来播放。

我知道 javascript 的 Document.GetElementById("VideoPlayer").SetAttribute("src","NEW LOCATION") 在一个函数中，但是，让我们面对现实吧。 IE6 + 7 很烂。

【问题讨论】：

简答：不要使用 iframe =)
因为如果有c#的答案，我也能看懂:)虽然我还是个学生
hotdesign.com/seybold

标签： c# javascript jquery asp.net

【解决方案1】：

只需使用链接。无需乱用 JavaScript。

您需要为框架命名，这就是链接目标框架的方式。

<a href="http://youtube.com/etc/etc" 
   target="name_of_frame">
       <img width="130" 
            src="./Images/Video_Logos/l_absa.gif" 
            alt="something" />
</a>

width 属性采用整数值（或整数后跟% 字符），而不是 CSS 长度。摆脱px。

<img> 元素上的 alt 属性是必需的 (even in HTML 5)

【讨论】：

google.com" target="VideoPlayer" /> 这应该针对我的 iframe，但它的作用是在新浏览器中打开页面。为什么会这样？
Nevermind XD 在我的 iframe 中有 ID= 属性，而不是 Name=

【解决方案2】：

从给出的答案：

How do I dynamically change the content in an iframe using jquery?

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
      $(document).ready(function(){
        var locations = ["http://webPage1.com", "http://webPage2.com"];
        var iframe = $('#frame');
        $(iframe).attr('src', locations[1]);
      });
    </script>
  </head>
  <body>
    <iframe id="frame"></iframe>
  </body>
</html>

我建议不要使用 iFrame 来播放 YouTube，请查看 Javascript Youtube API：

http://code.google.com/apis/youtube/js_api_reference.html

【讨论】：

谢谢。我现在时间很紧，必须在 3 小时内启动我的网站。设置此方法需要很长时间吗？
@Eon，从未使用过，但在使用中见过。如果要花 3 个小时做任何事情，并且可能不会冒新技术的风险，那么就把它放在待办事项列表中以便以后升级。
有待改进！谢谢！得到了上面的答案，来自@David Dorward