2012-06-08 23 views
2

我正在尝试生成一些嵌入式iframe代码,以便用户可以将代码包含在博客中以显示我计划提供的内容。目前我正在尝试提供的内容仅仅是一个网站。我尝试使用下面的代码在WordPress的博客:WordPress中的iframe

<iframe width="420" height="315" src="http://www.cnn.com" frameborder="0"></iframe> 

然而,当用户浏览网页的WordPress简单地输出一个链接“http://www.cnn.com”基于以下HTML。

<a href="http://www.cnn.com">http://www.cnn.com</a> 

这就是说,如果我使用Youtube生成的iframe代码,iframe加载正常。例如:

<iframe width="420" height="315" src="http://www.youtube.com/embed/_OBlgSz8sSM" frameborder="0" allowfullscreen></iframe> 

结果:

<iframe class='youtube-player' type='text/html' width='420' height='315' src='http://www.youtube.com/embed/_OBlgSz8sSM?version=3&#038;rel=1&#038;fs=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;wmode=transparent' frameborder='0'></iframe> 

任何想法,YouTube会启用此功能或更一般如何让我简单地iframe来工作。

+0

我没有试图加载谷歌或其他搜索引擎的iframe只是一个例子。我只是想在iframe中加载一个网页,但wordpress一直在给我一个锚点。我已经更新了代码,以包含ww.cnn.com为例。 – weber

回答

3

我不知道你为什么得到一个锚,而不是iframe,但我知道谷歌不希望他们的主页在iframe中。如果您将src http://www.google.com设为iframe,则会看到一个空的iframe。另见this example

=== UPDATE ===

WordPress的禁止除少数例外的I帧。可能你可以用简码处理它。尝试将以下未经测试的代码添加到主题中的functions.php中。

// [iframe src="www.cnn.com"] 
function iframe_func($atts) { 
    extract(shortcode_atts(array(
     'src' => 'default' 
    ), $atts)); 
    return '<iframe src="{$src}"></iframe>'; 
} 
add_shortcode('iframe', 'iframe_func'); 

现在您可以在wordpress管理员的文章编辑器中添加[iframe src="www.cnn.com"]

+0

我已经更新了我的答案。 – scessor

+0

输入变量的方式,这个答案对我有用http://stackoverflow.com/a/10956037/4047679 – raphael

0

Google使用X-Frame-Options标题(设置为SAMEORIGIN)来防止您将其放置在iframe中。解决此问题需要用户使用不支持X-Frame-Options的浏览器。

0

不幸的是,主要的搜索引擎网站,如谷歌和雅虎(排除bing)不允许嵌入iframe,因为它们提供了大量的API和集成选项。所以你真的没有办法做到这一点。如果您不打算将google嵌入到iframe源代码中,那么您应该清楚所使用的当前代码。尝试一下,只需将源代码改为其他的东西 - 谷歌将不会出现在它的位置。如果你想要一个搜索引擎,不幸的是,我说恐怖是唯一可行的。

希望这会有所帮助!

所以回顾一下 - 谷歌不会在iframe嵌入,但你生产的其他内容应根据你的编码: 例如:

<iframe width="420" height="315" src="http://www.uncrate.com" frameborder="0"></iframe> 

http://jsfiddle.net/pKby8/

锚,你得到的是一个结果的xFrame选项。当它连接到谷歌服务器的服务器反馈一个可爱的回应暗示你应该链接到他们,而不是iframe。

+0

感谢您的输入,抱歉的混乱的例子,但我不想只加载搜索引擎只是一个网页。当我尝试使用示例代码Wordpress时,只会加载锚点,尽管它在jsfiddle.net中有效。有什么建议么? – weber

+0

网页位于何处?你是否使用绝对地址,或者如果它是托管在你自己的服务器上它是相对的吗?如果这不起作用,你有没有考虑过使用插件? 我推荐的插件是http://wordpress.org/extend/plugins/iframe/ 使用简单的短代码 – Andrew

3

创建简码为我解决这个问题,得到的方式。它绕过WYSIWYG编辑器并将HTML放入页面。

我会这样来处理它。

添加到您的functions.php文件:

function add_iframe($atts) { 
    extract(shortcode_atts(array(
    'src' => '/' 
    ), $atts)); 
    $theframe = '<iframe src="'.$src.'" width="420" height="315" frameborder="0"></iframe>'; 
    return $theframe; 
} 
add_shortcode('iframe', 'add_iframe'); 

用途:

添加[IFRAME SRC = HTTP://thesiteyouwanttoshow.com]到您想要的iframe显示的内容。

2

如果您在iframe中加载自己的网页,请记住,大多数托管解决方案都将xFrame选项设置为SAMEORIGIN,因此无论您在Wordpress中进行了哪些更改,页面仍然不会呈现,因为它正被目标网站。

我花了几个小时这个问题,所以希望如果你有这个问题,你也将目标网站以及。如果您在rails上托管解决方案,我发现的答案是here,而且一定会在Wordpress中加载的网站可以找到here,因此请随时将该端点用作测试。