如何使用javascript更改iframe源

Question

我正在设置一个 iframe 来嵌入来自服务器的流视频，它运行完美。当用户单击标签以更新 iframe 并更改其来源时，我需要这样做。它也适用于我桌面上的不同浏览器，但不适用于移动设备。用户单击标签后，iframe 变空并仅在移动设备浏览器上显示（未找到）这种情况。有什么解决办法吗？

我搜索了很多答案，所有这些都为移动浏览器提供了相同的结果。我还尝试使用 javascript 函数来更新 iframe 的源代码。

iframe：

<iframe name="iframe1" id="frameid" style="width:600px; height:480px;" allowfullscreen src="http://serverip:8080/cc/embed.html"></iframe>

将更新 iframe 源的链接：

<a href="#" onclick="update('http://serverip:8080/test.html')">

javascript函数：

<script>

  function update(loc) {

    document.getElementById('frameid').src = loc;

  }

  </script>

我也尝试重新加载 iframe，但它也不起作用：

function update2(loc) {

     document.getElementById('frameid').src = loc;

     document.getElementById('frameid').contentWindow.location.reload(true);

  }

我还尝试在单击链接时创建一个新的 iframe，它创建了一个新的 iframe 但也是空的，也显示（未找到）。

Answer 1

你可以做这样的事情：<a href="http://www.google.com/" onclick="return loadIframe(this.href);">Page 1</a><a href="http://www.apple.com/" onclick="return loadIframe(this.href);">Page 2</a><iframe name="frameid" id="frameid" src="http://www.microsoft.com/" frameborder="0">&nbsp; &nbsp; &nbsp; &nbsp; Your browser doesn't support iframes.&nbsp; &nbsp; </iframe>function loadIframe(url) {&nbsp; $("#frameid").attr('src',url);&nbsp; return false;}

Answer 2

你在正确的轨道上。这一行确实有效：document.getElementById('myFrame').src = 'https://yournewurl.com';不要在链接上使用 onclick 属性，而是尝试添加一个事件侦听器，如下所示：document.getElementById('myLink').addEventListener('click', () => {// change src attribute of iframedocument.getElementById('myFrame').src = 'https://yournewurl.com';})