2012-06-08 22 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,因此請隨時將該端點用作測試。