網頁html頁面中iframe標簽的操作

站html頁面中包含iframe的操作

一個HTML頁面可以有一個或多個子框架，這些子框架以<iframe>來標記

iframe是內嵌的網頁元素，也可以說是內嵌的框架

iframe標記又叫浮動幀標記，可以用它將一個HTML文檔嵌入在一個HTML中顯示。它和Frame標記的最大區別是在網頁中嵌入的<Iframe></Iframe>所包含的內容與整個頁面是一個整體，而<Frame>< /Frame>所包含的內容是一個獨立的個體，是可以獨立顯示的。

另外，應用Iframe還可以在同一個頁面中多次顯示同一內容，而不必重復這段內容的代碼。

1.獲取子頁面

2.方法調用

3.獲取元素

例

標記一個內聯框架：

瀏覽器支持

所有主流瀏覽器都支持 <iframe> 標簽。

標簽定義及使用說明

一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔。

提示和注釋

提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之間，這樣就可以應對不支持 <iframe> 的瀏覽器。

提示：使用 CSS 為 <iframe> （包括滾動條）定義樣式。

HTML 4.01 與 HTML5之間的差異

HTML5 新增了一些新的屬性，同時去掉了 HTML 4.01 中的一些屬性。

HTML 與 XHTML 之間的差異

在 XHTML 中，name 屬性已被廢棄，并將被去掉。請使用 id 屬性代替。

屬性

New ：HTML5 中的新屬性。

屬性	值	描述
align	leftrighttopmiddlebottom	HTML5 不支持。HTML 4.01 已廢棄。規定如何根據周圍的元素來對齊 <iframe>。
frameborder	10	HTML5 不支持。規定是否顯示 <iframe> 周圍的邊框。
height	pixels	規定 <iframe> 的高度。
longdesc	URL	HTML5 不支持。規定一個頁面，該頁面包含了有關 <iframe> 的較長描述。
marginheight	pixels	HTML5 不支持。規定 <iframe> 的頂部和底部的邊距。
marginwidth	pixels	HTML5 不支持。規定 <iframe> 的左側和右側的邊距。
name	name	規定 <iframe> 的名稱。
sandboxNew	""allow-formsallow-same-originallow-scriptsallow-top-navigation	對 <iframe> 的內容定義一系列額外的限制。
scrolling	yesnoauto	HTML5 不支持。規定是否在 <iframe> 中顯示滾動條。
seamlessNew	seamless	規定 <iframe> 看起來像是父文檔中的一部分。
src	URL	規定在 <iframe> 中顯示的文檔的 URL。
srcdocNew	HTML_code	規定頁面中的 HTML 內容顯示在 <iframe> 中。
width	pixels	規定 <iframe> 的寬度。

全局屬性

事件屬性

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

明

iframe元素

創建包含另外一個文檔的內聯框架（即行內框架）。

CSS3規范，視口單位主要包括以下4個：

1、vw : 1vw 等于視口寬度的1%；

2、vh : 1vh 等于視口高度的1%；

3、vmin : 選取vw和vh中最小的那個；

4、vmax : 選取vw和vh中最大的那個；

100%高度和寬度：

body {
    margin: 0; /* Reset default margin */
}
iframe {
    display: block;  /* iframes are inline by default */
    background: #fff;
    border: none;   /* Reset default border */
    height: 100vh;   /* Viewport-relative units */
    width: 100vw;
}

參考代碼

HTML中嵌入iframe

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>XXXX調查表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		body html{
			margin:0;
			padding:0;
		}
		#app{
			margin: 0 auto;
			width: 600px;
		}
		iframe {
			display: block; 
			background: #FFF;
			border: none; 
			width:100vw;  /* Viewport-relative units */
			height:100vh;
			width:100%;
		}
	</style>
</head>
<body>
	<div id="app">
		<div>
			<button type="button"><span>返回</span></button>
			<button type="button" onclick="print()"><span>打印</span></button>
		</div>
		<h2>公司部門調查表</h2>
		<iframe src="C:/Users/dd/Desktop/003.html" scrolling="no"></iframe>
	</div>
</html>

被嵌入頁面：

<!doctype html>
<html lang="zh-CN">
<head>
	<title>XXXX調查表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<link href="https://cdn.bootcdn.net/ajax/libs/antd/4.18.2/antd.variable.css" rel="stylesheet">
	<!--
		https://v1-cn.vuejs.org/guide/forms.html
	-->
</head>
<body>
	<div id="app">
		<p><h2>公司部門調查表</h2></p>
		<form v-model="form" v-on:submit.prevent="saved()" >
			<fieldset>
				<legend>職員信息</legend>
				<ol>
					<li>
						<label>姓名: </label>
						<input v-model="form.name" type="text" name="name" autofocus/>
					</li>
					<li>
						<label>年齡: </label>
						<input v-model="form.age" type="number" name="age" />
					</li>
					<li>
						<label>性別:</label>
						<input v-model="form.sex" type="radio" name="sex" value="未知" />未知 
						<input v-model="form.sex" type="radio" name="sex" value="男" />男 
						<input v-model="form.sex" type="radio" name="sex" value="女" />女
					</li>
					<li>
						<label>籍貫：</label>
						<select v-model="form.nativePlace">
							<optgroup label="山西省">
								<option>太原市</option>
							</optgroup>
							<optgroup label="北京">
								<option>北京市</option>
							</optgroup>
						</select>
					</li>
					<li>
						<label>愛好:</label>
						<input v-model='form.hobbys' type="checkbox" name="hobby" value="爬山" />爬山 
						<input v-model='form.hobbys' type="checkbox" name="hobby" value="涉水" />涉水 
						<input v-model='form.hobbys' type="checkbox" name="hobby" value="下棋" />下棋 
						<input v-model='form.hobbys' type="checkbox" name="hobby" value="游戲" />游戲 
					</li>
					<li>
						<label>所在部門:</label>
						<select v-model="form.department">
							<option v-for="(item, index) in form.departments" :key="item">{{item}}</option>
						</select>
					</li>
					<li>
						<label>職位:</label>
						<input v-model="form.title" type="text" name="title" />
					</li>
					<li>
						<label>提交建議：</label>
						<input v-model="form.advise" type="file" name="form.advise" />
					</li>
					<li>
						<label>填表日期:</label>
						<input v-model="form.fillDate" type="date" name="fillDate">
					</li>
				</ol>
			</fieldset>
			<fieldset>
				<legend>反饋意見</legend>
				<ol>
					<li>
						<label>你對公司目前的發展表示：</label>
						<input v-model="form.development" type="radio" name="development" value="滿意"  /> 滿意  
						<input v-model="form.development" type="radio" name="development" value="不滿意"  /> 不滿意  
						<input v-model="form.development" type="radio" name="development" value="一般"  /> 一般
					</li>
					<li>
						<label>你對公司的任職崗位表示：</label>
						<input v-model="form.jobIdentification" type="radio" name="jobIdentification" value="認同"  /> 認同  
						<input v-model="form.jobIdentification" type="radio" name="jobIdentification" value="不認同"  /> 不認同  
						<input v-model="form.jobIdentification" type="radio" name="jobIdentification" value="一般"  /> 一般
					</li>
					<li>
						<label>你對公司的期望: </label> <br />
						<textarea v-model="form.expect" rows="4" name="neme" cols="50"></textarea>
					</li>
				</ol>
			</fieldset>
			<input type="submit" value="提交">
			<input type="reset" value="重置">
		</form>
	</div>
	<script>
		var now = new Date();
		var year = now.getFullYear();
		var month = now.getMonth()+1;
		var day = now.getDay();
		// 
		var app = new Vue({
			el: '#app',
			data() {
				return {
					form: {
						name:"孔子",
						age: 2000,
						sex: "男",
						nativePlace: "北京市",
						hobbys: ["爬山","下棋"],
						departments: ["財務部","法務部","加盟部","商務部","技術部"],
						department: "技術部",
						title: "工程師",
						fillDate: year + "-" + month + "-" + day,
						development: "一般",
						jobIdentification: "不認同",
						expect: "一切都美好~"
					}
				}
			},
			methods:{
				saved(){
					alert(JSON.stringify(this.form));
					axios.post('http://192.168.1.116:8080/data/post',this.form,{
						headers: { "token": "token123" }
					}).then(res => {
						console.log("result", JSON.stringify(res.data));
					})
				}
				
			}
		});
	</script>
</html>

VUE中嵌入：

在線咨詢

上一篇：Html5 獲取當前坐標位置，并在高德地圖中顯示
下一篇：[網站開發入門指南17] 了解常用媒體資源文件格式｜ html

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

網頁html頁面中iframe標簽的操作

明

參考代碼

您的項目需求