如何使用jQuery设置iframe的src？

Question

我的 iFrame 长这样：

<iframe id="iframe" name="iframe1" frameborder="0" src=""></iframe>

我的脚本看起来像这样：

<script type="text/javascript">
    $(document).ready(function() {
    $('#iframe').attr('src',http://google.com);
})
</script>

我还尝试着在网址周围加上引号：

<script type="text/javascript">
    $(document).ready(function() {
    $('#iframe').attr('src','http://google.com');
})
</script>

但是两者都没起作用。

我错过了什么？

- Alex

---

你的浏览器有报错吗？ - rjg132234

http://jsfiddle.net/SLaks/8JKxh/ - SLaks

Answer 1

如果您查看浏览器的错误控制台，您将看到真正的问题：

因为将“X-Frame-Options”设置为“SAMEORIGIN”，所以拒绝在框架中显示https：//www.google.com/。

谷歌不允许你这样做。

- SLaks

---

这是正确的答案。当与另一个URL一起使用时，它可以正常工作。我尝试了迪士尼网站（disney.com），添加高度/宽度属性后它也可以正常工作。 - Tim Wasson

@SLaks - 这是来自谷歌的元标记吗：<meta id="mref" name="referrer" content="origin">？ - Travis J

是的，Firefox 给我一个类似的错误： Load denied by X-Frame-Options: https://www.google.com/ does not permit cross-origin framing. 证明：http://jsfiddle.net/7vuB4/ - nullability

@TravisJ：不是的，这是由于X-Frame-Options HTTP头引起的。https://developer.mozilla.org/zh-CN/docs/HTTP/X-Frame-Options - SLaks

Answer 2

<script type="text/javascript">
    $(document).ready(function() {
    $('#iframe').attr('src', 'http://google.com');
})
</script>

网址上缺少引号。

- rjg132234

---

嘿，抱歉我刚刚编辑了一下，加上了那个。但那也不起作用。 - Alex

你有完整的代码吗？你的浏览器是否出现了错误？ - rjg132234

Answer 3

您不能在 iFrame 中加载 www.google.com。请尝试使用其他网址。

由于 https://www.google.com/ 不允许跨域框架，因此 X-Frame-Options 拒绝了加载。

- ChrisGheen

Answer 4

$("#iframe").attr("src","your url");

这将可以正常运行。

- user3332446

Answer 5

只需使用Iframe名称和所需URL调用函数。

function loadIframe(iframeName, url) {
    var $iframe = $('#' + iframeName);
    if ( $iframe.length ) {
        $iframe.attr('src',url);   
        return false;
    }
    return true;
}

Ex:

loadIframe("iframe1","http://yahoo.com");

- Nick