使用jQuery更改iframe的src

Question

我想要使用以下代码更改 iframe 的 src 并重新加载它：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
  $('#changeframe').click(function () {
  $('#declinedframe').attr('src', 'http://stackoverflow.com');
  });
</script>


<input type="button" id="changeframe" value="Change">

<iframe id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%" ></iframe>

当我点击按钮上的“更改”时，什么也没有发生。我做错了什么？

- Arya

---

如果您的代码与示例中的代码相同，您需要将jQuery包装在$(function() { ... });中，因为当脚本运行时按钮不存在。 - mplungjan

重新排列顺序。脚本放在最后，然后再试一次 :) - #changeframe 在您当前的顺序中尚不存在。 - Noobit

也许是因为jQuery在浏览器识别那些元素之前就已经运行了，所以需要使用DOM就绪函数？但你好像没有使用它... - NewToJS

你的表单标签里面有输入按钮吗？ - Navneet Singh

Answer 1

顺序很重要。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="button" id="changeframe" value="Change">

<iframe id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%" ></iframe>

// Go Last since changeframe hasn't exist yet.
<script>
  $('#changeframe').click(function () {
      $('#declinedframe').attr('src', 'http://stackoverflow.com');
  });
</script>

- Noobit

---

这个可以用，谢谢。能否使用文本链接代替按钮？ - Arya

是的，因为它只是onclick。我建议升级您的jQuery，因为1.11.1版本已经过时了:P - Noobit

然而，1.11仍然与IE<11兼容。 - mplungjan

@Noobit，链接会是什么样子？目前我有<a onclick="changeframe" id="again">Change</a>，但没有效果。 - Arya

Answer 2

1. 如果代码和您的示例一样，您需要将jQuery包装在 $(function() { ... }); 中，或者将其移动到html的下面，因为当脚本运行时按钮不存在
2. 查看控制台。您可能无法更改包含来自其他域的url的iframe的src - 一些浏览器（如IE）可能会抛出安全异常。您可能会在控制台中看到访问被拒绝的提示
3. 有些网站不允许将其页面嵌入到框架中。这不是您示例中的情况，但如果尝试在框架中加载谷歌，将会出现错误

$(function() {
  $('#changeframe').click(function() {
    $('#declinedframe').attr('src', 'http://stackoverflow.com');
  });
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<input type="button" id="changeframe" value="Change">

<iframe id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%"></iframe>

使用链接 - 无需 jQuery（如果上面的按钮正在提交表单，则目标为 iframename）：

<a href="http://stackoverflow.com/" target="declinedframe">Change</a>

<iframe name="declinedframe" id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%"></iframe>

如果你必须使用 jQuery 来创建链接，请将它的 ID 设为 changeframe。

$(function() {
  $('#changeframe').on("click",function(e) {
    e.preventDefault(); // cancel the link
    $('#declinedframe').attr('src', this.href );
  });
});

- mplungjan

---

数字2不是真的。 - Noobit

@Noobit 我已经改成使用“可能”（may）了，因为为了安全考虑，有些浏览器不允许修改已经加载的框架的src。 - mplungjan

只是出于好奇，哪些浏览器会阻止您更改页面上存在的iframe元素？难道是愚蠢的IE吗？o_O - Noobit

是的 - 我没有测试过IE11或Edge，但旧版IE不允许对从不同域加载的iframe进行任何操作。从安全欺骗的角度来看这是有道理的。 - mplungjan