【高階 iFrame 嵌入內容或顯示內容】Advanced iFrame Pro （讓嵌入的功能更能滿足需求！）

使用iframe 嵌入內容或顯示內容可以讓單一頁面擁有多樣內容，呈現來自其他網域的網頁內容，豐富網站瀏覽版面。
Advanced iFrame Pro 能按照您喜歡的方式在 iframe 中包含內容，可以隱藏和修改元素以及轉發參數。您還可以直接嵌入內容或顯示 iframe 的一部分。

網站使用iframe 嵌入內容或顯示內容 有那些好處？解析iframe優缺點：

iframe是常見的HTML語法，許多網站都喜歡藉由iframe置入其他網頁內容或顯示內容，網站使用iframe有那些好處？

 

iframe是什麼？

 

iframe即是HTML語法中的內嵌框架（inline frame），可以在一個網頁中建立獨立區域，將另一個網頁嵌入其中，使用時以<iframe>呈現。通常用在頁面中顯示社群網頁的資訊，如：

<iframe src=”http://www.xxxx.com/”>

</iframe>

常用的iframe屬性：

 

<iframe src>：指定要嵌入的頁面網址。

<iframe height>：設定iframe區域的高度，以像素為單位。

<iframe width>：設定iframe區域的寬度，以像素為單位。

<iframe name>：設定該iframe的名稱。

<iframe sandbox>：可針對iframe內的內容增加限制，若無特別指定，則是啟用所有限制，或個別設置不同的限制條件，如以下4種常見項目：

<allow-forms>：允許該iframe提交表單。
<allow-orientation-lock>：在使用者透過行動裝置瀏覽頁面時，允許鎖定螢幕方向。
<popups>：允許彈跳視窗出現。
<allow-scripts>：允許該iframe可執行JavaScript。

iframe 嵌入內容或顯示內容 的優點：

使用iframe可以讓單一頁面擁有多樣內容，呈現來自其他網域的網頁內容，豐富網站瀏覽版面。

在網站使用iframe 嵌入內容或顯示內容，能幫助網站提升SEO表現嗎？

由於搜尋引擎的檢索機器人無法檢索iframe的內容，設置iframe其實對於網站SEO沒有實質影響，如要讓搜尋引擎訪問iframe，可以在robot.txt內設定，更新至網站後台，檢索機器人就會瞭解iframe內容來自其他頁面。
所以，別誤解：使用iframe，能幫助網站提升SEO表現？那是沒有幫助的？

對SEO無幫助，那為何還要使用 iframe 嵌入內容或顯示內容呢？

那答案很簡單！例如：影片播放非常佔用網站資源與速度，那就可以將影片上傳至影片媒體平台，例如：youtube 或其他付費平台
之後，再使用iframe 嵌入內容或顯示媒體影片播放之內容（那租用便宜的虛擬主機，也能順利播放影片！）

嵌入iFrame 要調整內容的高度或修改遠程 iframe 的 css，您需要將一行 JAVASCRIPT 添加到遠程頁面!!
另外，您不能將 HTTP 頁麵包含到 HTTPS 頁面中！ 您應該具備基本的 html/css 知識，以便能夠識別網頁的元素。

在同一域上或者如果您能夠使用外部解決方法，您可以將 iframe 的大小調整為 iframe height。還可以檢測 iframe 中的動態大小變化，甚至支持 隱藏元素的自動高度。

即使您不在同一域中並且無法修改外部頁面，您也可以顯示遠程 iframe 的一部分。使用附帶的區域選擇器，您只需用鼠標選擇要顯示的區域即可。您還可以隱藏其他頁面的某些區域。為了完美集成，還支持 縮放！

您可以使用固定比例縮放 iframe 的內容，也可以通過自動縮放來縮放 iframe 的內容，自動縮放會根據瀏覽器大小計算係數。特別是在非響應式頁面上，這可能是移動設備的唯一解決方案。

您可以動態更改父級的 css，甚至還可以根據您的設置動態更改iframe 頁面的 css。因此，您可以隱藏頁眉和頁腳等元素或覆蓋靜態尺寸以使頁面更具響應性。

延遲加載是延長頁面加載時間的完美功能。因此，首先加載主頁，然後加載 iframe。您還可以僅在 iframe 可見時加載 iframe ，或者通過單擊按鈕加載 iframe 。

加載 iframe 通常需要額外的時間。因此，現在您可以向用戶顯示加載圖標，直到 iframe 完全加載。

Advanced iframe pro 有多種選項可以使您的 iframe 具有響應能力。還支持視頻。

 

許多網站在不同設備上看起來有所不同。通過包含的瀏覽器檢測，您可以根據檢測到的設備顯示不同的 iframe 或 iframe 的不同部分。

您可以動態更改父級的鏈接目標，甚至還可以根據您的設置更改iframe 頁面的鏈接目標。在 iframe 中，現在甚至可以更改鏈接！這還實現了可以在 iframe 的額外層中直接打開鏈接的功能。因此，即使用戶選擇外部鏈接，也不會離開您的網頁！自定義頁眉/頁腳也可以包含在該層中。

默認情況下，並非所有 IOS 版本都支持在 iframe 內滾動。IOS 解決方法與瀏覽器檢測相結合，是在插件中完成的，因為 IOS 解決方法在其他系統上不起作用！

支持許多解析參數的選項。您可以從父級轉發參數，並且您有許多佔位符，例如當前的 WordPress 用戶名。您甚至可以將 iframe url 作為參數添加到父 url，以便能夠為當前所選頁面添加書籤。

其中包含一個小部件，用於在小部件區域中添加 iframe 甚至任何短代碼。

此功能確實使您能夠僅通過 2 行代碼（js + iframe）來提供網站的某些部分。請參閱“內容過濾器”和“添加 ai_external.js 本地”解決方案。

iframe 檢查器現在包含在內部，還可以每天檢查一次所有 iframe！自 2020 版本以來，這是並行完成的，並且還檢查不是高級 iframe iframe 的 iframe！因此可以監視已經存在的 iframe（如果仍然可以包含它們）！每個使用 iframe 的人都應該使用此功能來確保用戶不會突然看到空白頁面。

您不僅可以在 WordPress 中使用此插件，還可以在任何可以插入幾行代碼的php 頁面中使用此插件！

默認情況下，Safari 和 IE 不太支持 iframe 中的 Cookie。此外，所有其他瀏覽器都可以配置為這不起作用。iframe 解決方法中的第3 方 cookie提供了一個可能的解決方案！

還包括一個古騰堡塊，可以輕鬆地將帶有預覽的 iframe 添加到編輯器中。

要將網頁包含到您的頁面中，請首先檢查以下事項：

檢查您的頁面是否允許包含：
檢查 iframe 頁面和父頁面是否是同一個域。www.example.com 和 text.example.com 是不同的域！
您可以修改應該包含的頁面嗎？
您很可能有以下設置之一：

無法包含 iframe：您無法包含該內容，因為所有者不允許這樣做。
可以包含 iframe，並且您位於不同的域中：請參閱功能比較表和功能可用性概述。要將內容大小調整為高度/寬度或修改 css，您需要通過添加一行 Javascript 來修改遠程 iframe 頁面以啟用所提供的解決方法。
可以包含 iframe 並且您位於同一域：可以使用該插件的所有功能。
查看功能比較表，詳細了解哪些功能可用於您的設置。

要輸入簡單的 iframe，請轉到管理並按照基本設置選項卡上的說明進行操作。在那裡，您可以使用基本的短代碼並在管理中設置設置，也可以直接在短代碼中覆蓋設置。另請閱讀常見問題解答並查看免費和專業示例。

如果 iframe 頁面位於不同的域並且無法使用外部解決方法，則擁有自己的服務器的高級用戶也可能會設置反向代理。有關詳細信息，請參閱此博客。
如果您混合使用 http 和 https，請閱讀此博客。父 https 和 iframe http 不適用於所有市長瀏覽器！

Advanced iFrame Pro安裝：

使用 WordPress 的默認插件安裝程序安裝 zip 或將 zip 文件中的“advanced-iframe”文件夾上傳到“/wp-content/plugins”目錄。確保文件advanced-iframe.php位於目錄/wp-content/plugins/advanced-iframe中
通過 WordPress 中的“插件”菜單激活插件
將“[advanced_iframe]”放入您的頁面或帖子中。可選的安全密鑰可以在“設置”->“高級 iFrame Pro”中找到
升級/更新
新的 WordPress 5.5。只需下載新版本並安裝即可。WordPress 確實檢測到該插件已安裝並詢問您是否要更新。只需單擊“是”即可完成。所有設置都在數據庫中。
所以什麼也沒有丟失。請保存一次高級 iframe 設置以將生成的 ai_external.js 更新到最新版本！
只需從 codecanyon 下載 zip 並使用 ftp 覆蓋以前安裝的所有文件，或者卸載插件（免費或專業版）並再次安裝新版本。所有設置都存儲在數據庫中，因此您不會丟失任何內容。
如果您使用了可以在 wordpress.org 上獲取的個人版本，也可以使用這種方式。如果更新後某些單選元素為空，只需選擇您喜歡的元素並再次保存即可。

請保存一次高級 iframe 設置以將生成的 ai_external.js 更新到最新版本！在生產系統上，您應該向 ai_external.js 添加版本計數器，以避免在使用外部解決方法時進行緩存，例如： …/ai_external.js?version=6

現場演示
查看專業演示，了解大多數主要功能的工作示例。這些示例是您想要使用的任何功能的良好開端。

行政
轉到設置 -> 高級 iFrame Pro
高級 iFrame Pro 屬性
請前往管理部門了解所有可能的短代碼屬性。如果您只使用一個 iframe，請使用管理中的設置，因為每個參數都有詳細說明，並且默認值也在那裡設置。

示例： [advanced_iframe securitykey=”123451234512345” src=” http://www.tinywebgallery.com” width=”100%” height=”500”]

您還可以在常見問題解答頁面上找到下載中包含的文檔。

評價高級 iFrame Pro
如果您還沒有留下項目評級，請隨時在您的項目下載頁面上留下項目評級。
大多數問題都很容易解決。還要確保您查看了快速入門指南，以確保可以使用您喜歡的功能！

網頁設計之HTML iframe框架：

Html iframe為內嵌框架，用來在網頁內內置另一個網頁，像是常見的在部落格內嵌facebook專頁，可以直接在內嵌頁面上按讚或分享，是很常見的應用範例。
Iframe可以設定寬度、高度、外框參數、卷軸參數。
範例：

src便是輸入要嵌入的網頁，width 與 height 分別用來設定 iframe的寬度與高度，單位預設為px，所以若是px單位的話只寫數字即可，但如果是百分比%的話要明寫出來

frameborder用來設定 iframe 的邊框是否要顯示
frameborder=”0″ ──不顯示邊框
frameborder=”1″ ──要顯示邊框

scrolling 用來控制 iframe 的卷軸是否要顯示，有三種屬性可以設定：scrolling=”yes” ──代表要顯示捲軸
scrolling=”no” ──代表不顯示
scrolling=”auto” ──則代表根據網頁大小自動顯示。

 

【洪總教頭】對於此軟體程式提示與備註：

Advanced iframe pro 是一套非常好用的軟體，
你若有此需求可以直接至官方購買，本文作者並無業配與無廠商獲利的關係！
（此軟體程式並無提供試用！）這樣對消費者與軟體商 雙方要在購買前溝通清楚！
以免產生不必要誤解！

人家常說：吃水果要拜：樹頭！請尊重軟體開發者的著作與智慧財產權！
作者有商業收入（才能創作更好的軟體程式）！
消費者可以獲得開發者的技術資源，那才不置於在軟體使用遇到問題時，無諮詢管道！
別閉門造車、自己摸索（時間是最寶貴的東西！）

網站精要註解：

【洪總教頭】常說：唯有你我知道的秘密，就不可能到處去說給別人聽，因為：到處宣揚的就不叫做【密技】！
一個人會快速成功必須有的三個要點是：
1.高人指點！（讓你少走灣路，直接邁向成功之路！）
2.貴人幫助！（例如：你有良師益友）能在技術上或經驗上幫助你快速執行電子商務！
3.自己的努力！（再好賺的生意，還是要努力經營）架構好銷售或網路服務平台。
做好 SEO 優化與網路行銷，管理好後台訂單.物流出貨，金流收款..等等事務！

【洪總教頭】再告訴你：謀大事者藏於心、行於事。
能用金錢解決的問題，就別用人情！ 能用汗水解決的問題，就別用淚水！
永遠記住：富在術數、不在勞身！立在局勢、不在立耕！
歡迎你能在本網站找到你合適的課程（藉助我們的技術諮詢）
讓你在網路電子商務的事業上，邁向收入豐厚的網路收入！
我們的課程（有提供技術諮詢）這樣能讓學員遇到疑難與不解時，有一個可以技術諮詢的服務！！