Question

我要创建一个必须动态更新其内容的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糟透了。

Answer 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）

Answer 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

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

2 个答案: