如何使用 jQuery 将 src 设置为 iframe？答案

【问题标题】：How do I set the src to an iframe with jQuery?如何使用 jQuery 将 src 设置为 iframe？
【发布时间】：2013-06-03 00:20:08
【问题描述】：

我的 iFrame 如下所示：

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

我的脚本是这样的：

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

我也尝试在 url 周围加上引号：

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

但两者都不起作用。

我错过了什么？

【问题讨论】：

您是否从浏览器收到任何错误？
jsfiddle.net/SLaks/8JKxh

标签： javascript jquery iframe src

【解决方案1】：

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

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

Google 不允许您这样做。

【讨论】：

这是正确的答案。它在与另一个 URL 一起使用时有效。我尝试了 disney.com，它运行良好（一旦添加了高度/宽度属性）。
@SLaks - 来自谷歌的元标记：<meta id="mref" name="referrer" content="origin">？
是的，Firefox 给了我一个类似的错误：Load denied by X-Frame-Options: https://www.google.com/ does not permit cross-origin framing. 证明：jsfiddle.net/7vuB4
@TravisJ：不；这是由于X-Frame-Options HTTP 标头。 developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options

【解决方案2】：

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

网址上缺少引号。

【讨论】：

嘿，抱歉，我刚刚编辑了它以包含它。那也不行。
你有完整的代码吗？你的浏览器是否给你一个错误？

【解决方案3】：

您不能在 iFrame 中加载 www.google.com。用另一个网址试试。

Load denied by X-Frame-Options: https://www.google.com/ does not permit cross-origin framing.

【讨论】：

【解决方案4】：

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

这会很好。

【讨论】：

【解决方案5】：

只需调用带有 iframe 名称和所需 url 的函数

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

例如：

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

【讨论】：