一、介紹

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

二、使用

<iframe>標(biāo)簽的基本用法如下：

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

三、屬性 

四、注意

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

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

總之，在使用 <iframe> 標(biāo)簽時(shí)，需要仔細(xì)權(quán)衡其優(yōu)缺點(diǎn)，確保安全和性能。

五、傳值

5.1 URL傳參

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

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

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

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

 或者寫一個(gè)函數(shù)獲取對(duì)應(yīng)的值（該方法來(lái)自拓維的一位前端工程師大佬）：

//從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()方法是一種用于在不同窗口或文檔之間傳遞消息的通用方法，它可以實(shí)現(xiàn)跨域通信。在使用postMessage()方法時(shí)，需要在發(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) {
  // 判斷消息來(lái)源是否是指定的發(fā)送方窗口
  if (event.origin === "http://child.com") {
    // 處理接收到的消息
    console.log(event.data);
  }
}

5.2.2 父?jìng)髯樱?/h4>

父：

創(chuàng)建實(shí)例對(duì)象：

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') { // 驗(yàn)證消息來(lái)源
    console.log(event.data); // 處理接收到的消息
  }
}

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

您可能感興趣的文章:

• 在vue中使用iframe解決視頻資源的防盜鏈
• vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問(wèn)題
• vue3中如何使用iframe嵌入vue2頁(yè)面
• 使用iframe實(shí)現(xiàn)pdf文件預(yù)覽功能
• 在?Vue?中使用?iframe?嵌套頁(yè)面的步驟

最新評(píng)論