Wordpress 中的 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10949966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iframes in Wordpress
提问by weber
I am trying to generate some embeddable iframe code so a user can include the code on a blog to display content I'm planning to deliver. Right now the content I'm trying to deliver is just a website. I am trying to use the following code on a Wordpress blog:
我正在尝试生成一些可嵌入的 iframe 代码，以便用户可以将代码包含在博客中以显示我计划提供的内容。现在我试图提供的内容只是一个网站。我正在尝试在 Wordpress 博客上使用以下代码：
<iframe width="420" height="315" src="http://www.cnn.com" frameborder="0"></iframe>
However when the page is viewed Wordpress simply outputs a link for "http://www.cnn.com" based on the following html.
但是，当查看页面时，Wordpress 只是基于以下 html 输出“http://www.cnn.com”的链接。
<a href="http://www.cnn.com">http://www.cnn.com</a>
That said, if I use Youtube generated iframe code, the iframe loads fine. For example:
也就是说，如果我使用 Youtube 生成的 iframe 代码，iframe 加载正常。例如：
<iframe width="420" height="315" src="http://www.youtube.com/embed/_OBlgSz8sSM" frameborder="0" allowfullscreen></iframe>
results in:
结果是：
<iframe class='youtube-player' type='text/html' width='420' height='315' src='http://www.youtube.com/embed/_OBlgSz8sSM?version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent' frameborder='0'></iframe>
Any idea what Youtube is doing to enable this functionality or more generally how to get my simply iframe to work.
知道 Youtube 正在做什么来启用此功能或更一般地如何让我的简单 iframe 工作。
回答by scessor
I don't know why you get an anchor instead of the iframe, but I know that google don't want their homepage in iframes. If you would have an iframe with the src http://www.google.com, you would see an empty iframe. Also see this example.
我不知道为什么你得到一个锚而不是 iframe，但我知道谷歌不希望他们的主页在 iframe 中。如果您有一个带有 src http://www.google.com的 iframe ，您会看到一个空的 iframe。另请参阅此示例。
=== UPDATE ===
=== 更新 ===
Wordpress prohibits iframes with few exceptions. Probably you can handle it with shortcodes. Try adding following untested code into the functions.php in your theme.
除了少数例外，Wordpress 禁止使用 iframe。也许你可以用短代码处理它。尝试将以下未经测试的代码添加到主题中的 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');
Now you can add [iframe src="www.cnn.com"]in the article editor in the wordpress admin.
现在您可以[iframe src="www.cnn.com"]在 wordpress 管理中的文章编辑器中添加。
回答by OKParrothead
Creating a shortcode is the way I get around this problem. It bypasses the WYSIWYG editor and puts the html in the page.
创建短代码是我解决这个问题的方法。它绕过 WYSIWYG 编辑器并将 html 放入页面中。
I would approach it like this.
我会像这样接近它。
Add this to your functions.php file:
将此添加到您的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');
Useage:
用途：
Add [iframe src=http://thesiteyouwanttoshow.com] to the content where you want the iframe to show.
将 [iframe src=http://thesiteyouwanttoshow.com] 添加到您希望 iframe 显示的内容。
回答by Snappy Budget
If you are loading your own web page within the iframe remember that most hosted solutions will have xFrame options set to SAMEORIGIN, so no matter what you change in Wordpress, the page will still not render as it is being blocked by the target website.
如果您在 iframe 中加载自己的网页，请记住大多数托管解决方案会将 xFrame 选项设置为 SAMEORIGIN，因此无论您在 Wordpress 中进行什么更改，该页面仍不会呈现，因为它被目标网站阻止。
I spent hours with this problem so hopefully if you are having this issue you will the target website as well. If you are hosting a solution on rails the answer I found is hereand a website that will definitely load in Wordpress can be found here, so feel free to use that endpoint as a test.
我花了几个小时来解决这个问题，所以希望如果您遇到这个问题，您也会访问目标网站。如果您在 Rails 上托管解决方案，我找到的答案在这里，并且可以在此处找到肯定会在 Wordpress 中加载的网站，因此请随意使用该端点作为测试。
回答by ceejayoz
Google uses the X-Frame-Optionsheader (set to SAMEORIGIN) to prevent you from placing it in an iframe. Getting around this would require the user to use a browser that doesn't support X-Frame-Options.
Google 使用X-Frame-Options标头（设置为SAMEORIGIN）来防止您将其放置在 iframe 中。解决这个问题需要用户使用不支持X-Frame-Options.
回答by Andrew
Unfortunately the major search engine sites such as google and yahoo (bing excluded) don't allow for iframe embedding since they offer a plethora of APIs and integration options. So there is really no real way for you to do this. If you are not planning on embedding google as your iframe source then you should be in the clear with the current code that you have in place. Try it out and just change the source to something else - google will not show up in its place. If you want a search engine there unfortunately it is with horror that I say that bing is the only one that works.
不幸的是，主要的搜索引擎站点，例如 google 和 yahoo（不包括 bing）不允许嵌入 iframe，因为它们提供了过多的 API 和集成选项。所以你真的没有真正的方法来做到这一点。如果您不打算将 google 嵌入为您的 iframe 源，那么您应该清楚您拥有的当前代码。尝试一下，只需将源更改为其他内容 - 谷歌不会出现在它的位置。不幸的是，如果你想要一个搜索引擎，我很震惊地说 bing 是唯一有效的搜索引擎。
Hope this helps!
希望这可以帮助！
So in recap - Google does not embed in iframe, but other content that you produce should based on your coding: example:
所以回顾一下 - Google 没有嵌入 iframe，但您制作的其他内容应该基于您的编码：例如：
<iframe width="420" height="315" src="http://www.uncrate.com" frameborder="0"></iframe>
The Anchor that you get is a result of the xFrame option. When it connects to the google servers the servers kick back a cute response hinting that you should link to them instead of iframe.
您获得的 Anchor 是 xFrame 选项的结果。当它连接到谷歌服务器时，服务器会回击一个可爱的响应，暗示你应该链接到它们而不是 iframe。
回答by Nick
I would create a WordPress short_codethat would insert your iFrame in the output. I think by adding the iFrame code directly in the post box wordpress is changing it.
我会创建一个 WordPress short_code，将您的 iFrame 插入到输出中。我认为通过在邮箱中直接添加 iFrame 代码，wordpress 正在改变它。
