iframe框架

時間 2019-11-12

標籤 iframe 框架欄目 HTML 简体版

原文原文鏈接

定義

iframe 元素會建立包含另一個文檔的內聯框架（即行內框架）。html

屬性

屬性	值	描述
align	left right top middle bottom	不同意使用。請使用樣式代替。跨域規定如何根據周圍的元素來對齊此框架。框架
frameborder	1 0	規定是否顯示框架周圍的邊框。
height	pixels %	規定 iframe 的高度。
width	pixels %	規定 iframe 的寬度度。
longdesc	URL	規定一個頁面，該頁面包含了有關 iframe 的較長描述。
marginheight	pixels	定義 iframe 的頂部和底部的邊距。
marginwidth	pixels	定義 iframe 的左側和右側的邊距。
name	frame_name	規定 iframe 的名稱。
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	啓用一系列對 <iframe> 中內容的額外限制。
scrolling	yes no auto	規定是否在 iframe 中顯示滾動條。
seamless	seamless	規定 <iframe> 看上去像是包含文檔的一部分。
src	URL	規定在 iframe 中顯示的文檔的 URL。
srcdoc	HTML_code	規定在 <iframe> 中顯示的頁面的 HTML 內容。

傳值

postMessage

postMessage方法容許來自不一樣源的腳本採用異步方式進行有限的通訊，能夠實現跨文本檔、多窗口、跨域消息傳遞。less

語法： otherWindow.postMessage(message, targetOrigin, [transfer]); 異步

otherWindow：其餘窗口的引用，如iframe的contentWindow、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames。
message：將要發送到其餘window的數據。
targetOrigin：指定那些窗口能接收到消息事件，其值能夠是字符串「*」表示無限制，或者是一個URL。
transfer：是一串和message同時傳遞的Transferable對象，這些對象的全部權將被轉移給消息的接收方，而發送方將再也不保留全部權。

postMessage方法被調用時，會在全部頁面腳本執行完畢以後像目標窗口派發一個MessageEvent消息，該MessageEvent消息有四個屬性：post

type：表示該message的類型
data：爲postMessage的第一個參數
origin：表示調用postMessage方法窗口的源
source：記錄調用postMessage方法的窗口對象

例子

父頁面：spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>主頁面</h1>
<iframe id="child" src="http://localhost:63342/test/b.html"></iframe>
<div>
    <h2>主頁面接收消息區域</h2>
    <span id="message"></span>
</div>
</body>
<script>
    window.onload = function(){
        document.getElementById('child').contentWindow.postMessage("主頁面消息", "*")
    }
    window.addEventListener('message', function(event){
        document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
    }, false);
</script>
</html>

子頁面：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>子頁面</h2>
<div>
    <h3>接收消息區域</h3>
    <span id="message"></span>
</div>
</body>
<script>
    window.addEventListener('message',function(event){
        if(window.parent !== event.source){return}
        console.log(event);
        document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
        top.postMessage("子頁面消息收到", '*')
    }, false);
</script>
</html>

1. 內聯框架（iframe）
2. 內聯框架iframe
3. a標籤和iframe框架、frameset框架
4. frame、iframe框架編程
5. HTML內聯框架iframe
6. iframe框架和雪碧圖
7. HTML Iframe（內聯框架）
8. iframe框架前進後退
9. iframe框架的使用
10. jsp的iframe框架應用
更多相關文章...
• Docker 架構 - Docker教程
• SSH框架（Struts2+Spring+Hibernate）搭建整合詳細步驟 - Spring教程
• 適用於PHP初學者的學習線路和建議
• 常用的分佈式事務解決方案

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。