iframe的基本介紹與使用
一、介紹
iframe(內嵌框架)是 HTML 中一種用于將一個網頁嵌入到另一個網頁中的標簽,它可以在一個頁面中顯示來自其他頁面的內容。在網頁中,使用<iframe>標簽可以將一個網頁嵌套在另一個網頁中,實現網頁間的互聯互通。
二、使用
<iframe>標簽的基本用法如下:
<iframe src="URL"></iframe>
三、屬性
| 屬性 | 描述 |
|---|---|
| allow | 允許特定功能的列表,如fullscreen,geolocation等 |
| allowfullscreen | 指定是否允許在iframe中使用全屏模式 |
| allowpaymentrequest | 指定是否允許在iframe中進行支付請求 |
| allowtransparency | 指定iframe是否可以是透明的 |
| class | 為iframe定義一個或多個類名 |
| frameborder | 指定是否在iframe周圍顯示邊框 |
| height | 指定iframe的高度 |
| importance | 指定iframe對頁面內容的重要性 |
| loading | 指定iframe加載時的行為 |
| name | 為iframe定義一個名稱 |
| referrerpolicy | 指定如何發(fā)送referer HTTP標頭 |
| sandbox | 啟用iframe的沙盒模式,提高安全性 |
| src | 指定要在iframe中顯示的文檔的URL |
| srcdoc | 在iframe中嵌入HTML代碼而不是外部文檔 |
| style | 定義iframe的CSS樣式 |
| title | 為iframe定義一個標題 |
| width | 指定iframe的寬度 |
四、注意
雖然 <iframe> 標簽可以很方便地實現上述功能,但是需要注意以下幾點:
- 嵌入的網頁必須與主頁面同源,否則會受到瀏覽器的安全限制。
- 嵌入的網頁可能會影響頁面性能和加載速度,特別是當嵌入的網頁包含大量的資源(如圖片、CSS 和 JavaScript)時。
- 嵌入的網頁可能會被惡意攻擊者用于釣魚或注入惡意代碼的攻擊,因此需要謹慎使用。
總之,在使用 <iframe> 標簽時,需要仔細權衡其優(yōu)缺點,確保安全和性能。
五、傳值
5.1 URL傳參
可以在iframe的src屬性中使用查詢參數(也稱為URL參數)將數據傳遞到嵌入的頁面。例如,假設iframe嵌入的頁面URL是 index.com/page.html,那么可以使用如下的URL來傳遞數據:
<iframe src="index.com/page.html?param1=value1¶m2=value2"></iframe>
在嵌入的頁面中,可以使用JavaScript獲取查詢參數并使用它們:
var params = new URLSearchParams(window.location.search);
var param1 = params.get('param1');
var param2 = params.get('param2');或者寫一個函數獲取對應的值(該方法來自拓維的一位前端工程師大佬):
//從url獲取參數
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()方法是一種用于在不同窗口或文檔之間傳遞消息的通用方法,它可以實現跨域通信。在使用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的基本介紹與使用的詳細內容,更多關于iframe介紹與使用的資料請關注腳本之家其它相關文章!
相關文章
JavaScript Serializer序列化時間處理示例
JavaScriptSerializer序列化時間后會把時間序列化成N進制的鬼數據 ,下面有個示例,需要的朋友可以了解下2014-07-07
使用Axios攔截器優(yōu)化HTTP請求與響應的實踐案例
在前端開發(fā)中,HTTP 請求是與后端交互的重要方式,為了提高代碼的可維護性、復用性以及用戶體驗,使用 Axios 攔截器是非常常見的做法,本文將詳細介紹如何使用 Axios 的請求攔截器和響應攔截器,需要的朋友可以參考下2024-11-11
javascript閉包傳參和事件的循環(huán)綁定示例探討
按常理循環(huán)綁定事件,但是得到的結果卻不是想要的,下面有個不錯的示例,可以為大家詳細分解下2014-04-04
Bootstrap Tooltip顯示換行和左對齊的解決方案
小編在使用Bootstrap的Tooltip功能時遇到一些小問題,換行丟失,文字不是左對齊。下面小編給大家介紹下Bootstrap Tooltip顯示換行和左對齊的解決方案,感興趣的朋友一起看看吧2017-10-10

