iframe的基本介紹與使用

更新時間：2024年02月11日 09:04:06 作者：大聰明碼農(nóng)徐

本文將給大家詳細介紹一下iframe的基本介紹與使用,iframe（內(nèi)嵌框架）是 HTML 中一種用于將一個網(wǎng)頁嵌入到另一個網(wǎng)頁中的標簽,它可以在一個頁面中顯示來自其他頁面的內(nèi)容,需要的朋友可以參考下

一、介紹

iframe（內(nèi)嵌框架）是 HTML 中一種用于將一個網(wǎng)頁嵌入到另一個網(wǎng)頁中的標簽，它可以在一個頁面中顯示來自其他頁面的內(nèi)容。在網(wǎng)頁中，使用<iframe>標簽可以將一個網(wǎng)頁嵌套在另一個網(wǎng)頁中，實現(xiàn)網(wǎng)頁間的互聯(lián)互通。

二、使用

<iframe>標簽的基本用法如下：

<iframe src="URL"></iframe>

三、屬性

屬性	描述
allow	允許特定功能的列表，如fullscreen，geolocation等
allowfullscreen	指定是否允許在iframe中使用全屏模式
allowpaymentrequest	指定是否允許在iframe中進行支付請求
allowtransparency	指定iframe是否可以是透明的
class	為iframe定義一個或多個類名
frameborder	指定是否在iframe周圍顯示邊框
height	指定iframe的高度
importance	指定iframe對頁面內(nèi)容的重要性
loading	指定iframe加載時的行為
name	為iframe定義一個名稱
referrerpolicy	指定如何發(fā)送referer HTTP標頭
sandbox	啟用iframe的沙盒模式，提高安全性
src	指定要在iframe中顯示的文檔的URL
srcdoc	在iframe中嵌入HTML代碼而不是外部文檔
style	定義iframe的CSS樣式
title	為iframe定義一個標題
width	指定iframe的寬度

四、注意

雖然 <iframe> 標簽可以很方便地實現(xiàn)上述功能，但是需要注意以下幾點：

嵌入的網(wǎng)頁必須與主頁面同源，否則會受到瀏覽器的安全限制。
嵌入的網(wǎng)頁可能會影響頁面性能和加載速度，特別是當嵌入的網(wǎng)頁包含大量的資源（如圖片、CSS 和 JavaScript）時。
嵌入的網(wǎng)頁可能會被惡意攻擊者用于釣魚或注入惡意代碼的攻擊，因此需要謹慎使用。

總之，在使用 <iframe> 標簽時，需要仔細權衡其優(yōu)缺點，確保安全和性能。

五、傳值

5.1 URL傳參

可以在iframe的src屬性中使用查詢參數(shù)（也稱為URL參數(shù)）將數(shù)據(jù)傳遞到嵌入的頁面。例如，假設iframe嵌入的頁面URL是 index.com/page.html，那么可以使用如下的URL來傳遞數(shù)據(jù)：

<iframe src="index.com/page.html?param1=value1&param2=value2"></iframe>

在嵌入的頁面中，可以使用JavaScript獲取查詢參數(shù)并使用它們：

var params = new URLSearchParams(window.location.search);
var param1 = params.get('param1');
var param2 = params.get('param2');

或者寫一個函數(shù)獲取對應的值（該方法來自拓維的一位前端工程師大佬）：

//從url獲取參數(shù)
export const getQuery = (name: string, url?: string) => {
  const params = new URLSearchParams(url || window.location.search);
  const value = params.get(name);
  if (value) {
    return value;
  }
  return getQueryString(name, url);
};
 
export const getQueryString = (name: string, url?: string) => {
  const reg = new RegExp('(^|&|/?)' + name + '=([^&]*)(&|$)', 'i');
  const r = encodeURI(url || window.location.search || window.location.href || window.location.hash)
    .substr(1)
    .match(reg);
  if (r != null) return unescape(r[2]);
  return null;
};

5.2 postMessage（）傳參

postMessage()方法是一種用于在不同窗口或文檔之間傳遞消息的通用方法，它可以實現(xiàn)跨域通信。在使用postMessage()方法時，需要在發(fā)送消息的窗口（發(fā)送方）和接收消息的窗口（接收方）中分別編寫代碼。

5.2.1 子傳父：

子：

// 發(fā)送消息給接收方窗口
window.parent.postMessage("Hello, parent!", "http://parent.com");

父：

// 監(jiān)聽message事件，接收消息
window.addEventListener("message", receiveMessage, false);
 
function receiveMessage(event) {
  // 判斷消息來源是否是指定的發(fā)送方窗口
  if (event.origin === "http://child.com") {
    // 處理接收到的消息
    console.log(event.data);
  }
}

5.2.2 父傳子：

父：

創(chuàng)建實例對象：

const iframe = document.getElementById('my-iframe');
const iframeWindow = iframe.contentWindow;

發(fā)送消息：

const message = { type: 'GREETINGS', data: 'Hello, child!' };
const targetOrigin = 'http://child.com'; // 指定接收方的源
iframeWindow.postMessage(message, targetOrigin);

子：

接收消息

window.addEventListener('message', receiveMessage, false);
 
function receiveMessage(event) {
  if (event.origin === 'http://parent.com') { // 驗證消息來源
    console.log(event.data); // 處理接收到的消息
  }
}

以上就是iframe的基本介紹與使用的詳細內(nèi)容，更多關于iframe介紹與使用的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: