如何使用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">

        Your browser doesn't support iframes.

    </iframe>

function loadIframe(url) {

  $("#frameid").attr('src',url);

  return false;

}

Answer 2

你在正确的轨道上。

这一行确实有效：

document.getElementById('myFrame').src = 'https://yournewurl.com';

不要在链接上使用 onclick 属性，而是尝试添加一个事件侦听器，如下所示：

document.getElementById('myLink').addEventListener('click', () => {

// change src attribute of iframe

document.getElementById('myFrame').src = 'https://yournewurl.com';

})