如何从 iframe 内部更改其 src 属性

Question

我需要在iframe内部的按钮被点击后更改iframe的src属性。

最初的回答：

您可以使用JavaScript来实现这一点。首先，为按钮添加一个点击事件监听器。在该监听器中，获取iframe元素并将其src属性更改为所需的URL。

<button type="button" onclick="ch_src('page2.php')">Submit</button>

<script type='text/javascript'>
function ch_src(loc) 
{ 
var v = document.getElementById('iframe1');
v.src = loc;
}
</script>

(1) 使用 window.location = loc; 时，它会更改 iframe 的内容，但 src 仍指向上一个页面。
(2) 为什么我们需要更改 src 值而不仅仅是在 iframe 内打开新页面？我们使用 JS 打印 iframe 内容，排除 iframe 外的内容。此脚本打印 src 中的页面，而不是实际打开的页面。
(3) 上述函数无法更改 src，大多数情况下是因为它无法获取自身（iframe）的元素 id，但可能是子元素。
(4) 将函数移动到 iframe 外部时，它不会执行。可能是由于 "同源策略"。
最后，我们需要在 iframe 内的 (page1.php) 中点击按钮，导致：
(1) 将 (page2.php) 加载到同一 iframe 中
(2) 更改 iframe 的 src 属性为 (page2.php)

- Ahmed Kilany

Answer 1

首先引入jQuery， 然后在你的page1.php中尝试以下代码：

<script type="text/javascript">
$(document).ready(function(){
  $("iframe").load(function(){
      $(this).contents().find("button").click(function(){
      document.querySelectorAll("iframe").src = "https://example.com/page2.php";
      });
  });
});
</script>

为了更好地检测，请在此处粘贴您的page1.php。

- Shahab Arvin