Question

我想在我的网站上创建一个从列表中加载随机URL的iframe。我试过这个

＆＃13;

<html>

<head>

</head>

<body>
  <iframe class="frame" src="" style="width:200px; height: 200px"></iframe>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
   var cat1 = [
"https://www.youtube.com/watch?v=2XG_0iV2B40",
"https://www.youtube.com/watch?v=QnxpHIl5Ynw",
];

    var myFrame = document.getElementsByClassName("frame");

    function getRandomUrl(myFrame) {
      var index = Math.floor(Math.random() * cat1.length);
      var url = cat1[index];
      myFrame.src = url;
    }


    function codeAddress() {
      getRandomUrl(myFrame);
    }
  </script>
  <script type="text/javascript">
    codeAddress();
  </script>
</body>

</html>

＆＃13;

但它没有用。我基本上尝试了所有我能找到的东西，没有任何效果，我也不明白为什么。任何帮助表示赞赏。感谢。

Answer 1

问题是您正在使用document.getElementsByClassName("frame")，它返回具有该类名的所有元素的集合。要访问您的特定框架，您需要使用document.getElementsByClassName("frame")[0]访问第一个元素。

除此之外，您还需要使用YouTube的嵌入链接（https://www.youtube.com/embed/[videoID]），而不是直接通过?v=videoID链接到视频。

我已经为您更新了链接，更正了变量，并在控制台中记录了视频源。单击“运行代码段”多次将随机更改视频：

var cat1 = [
  "https://www.youtube.com/embed/8PIPyPMNnp8",
  "https://www.youtube.com/embed/gM2KaaVXs_g",
];

var myFrame = document.getElementsByClassName("frame")[0];

function getRandomUrl(myFrame) {
  var index = Math.floor(Math.random() * cat1.length);
  var url = cat1[index];
  myFrame.src = url;
}

function codeAddress() {
  getRandomUrl(myFrame);
}

codeAddress();

console.log(myFrame.src);

<iframe class="frame" src="" style="width:200px; height: 200px"></iframe>

希望这有帮助！：）

随机iframe内容

1 个答案: