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

站html頁面中包含iframe的操作

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

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

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

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

1.獲取子頁面

2.方法調用

3.獲取元素

明

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大前端官網、千鋒教育HTML5大前端好程序員官網。這是如何做到的呢？

其實也不難，使用 iframe 就可以實現了。 iframe的作用是，用來在一個網頁中顯示另一個網頁。

iframe 是個雙標簽，基本語法為：尖角號iframe，尖角號 /iframe。

iframe 標簽有五個基本屬性：

src 屬性，資源的意思，用以引入其他網站的頁面，值是一個頁面路徑。

width 屬性，寬度的意思，用以控制引入頁面的寬度，值是一個數字。

height 屬性，高度的意思，用以控制引入頁面的高度，值是一個數字。

frameborder 屬性，框架邊框的意思，默認引入的框架帶有邊框，通常情況下將該屬性值設置為0，來取消框架的邊框。

scrolling[?skr??l??] 屬性，滾動的意思，用來控制是否顯示框架的滾動條，值有三個：

auto，在需要的情況下出現滾動條，也是默認值。

yes，始終顯示滾動條。

no，從不顯示滾動條。

我們來做個例子。

打開編輯器，新建一個 iframe-demo.html 文件，補全基礎代碼，在 body 里添加 iframe 標簽，首先定義 src 屬性，值為 http://www.qfedu.com，frameborder 屬性的值設置為1，顯示邊框。保存頁面。

在瀏覽器中打開頁面。千鋒教育的官網在 iframe 的默認大小的窗口里顯示了。

返回編輯器，給 iframe 定義屬性 width 等 800，height 等于 600，保存。

回到瀏覽器，刷新，iframe 的窗口變大了。可以通過滾動條查看網站內容。

返回編輯器，如果給iframe 定義一個scrolling 屬性，值為 no 的話，滾動條就不見了。

回到瀏覽器，刷新。此時就不能查看窗口隱藏的內容了。

iframe 也可以作為一個鏈接的目標框架。鏈接的 target 屬性必須設置為 iframe 的 name 屬性。

比如給 iframe 定義 name 屬性的值為 iframe_a，鏈接 a 的 target 屬性值也設置為 iframe_a。這樣，當點擊鏈接時，千鋒教育的官網就在這個 iframe 窗口里打開了。

我們再來看個例子，當點擊三個鏈接，iframe 里顯示了相應鏈接的網站。

我們來實現這個例子。

回到編輯器，創建一個 iframe-example.html 文件，補全基本代碼，在 body 里添加一個 div 容器，在容器里添加一個 iframe，定義屬性 src 等于 http://qfedu.com，width 等于 800，height 等于 600。保存。

在瀏覽器中打開頁面，一個 iframe 框架做好了。

回到編輯器，在 body 里的第一行再添加一個 div 容器，在容器里書寫 emmet 命令：a 中括號 href 空格 target 等于 iframe_a 大于號 b 乘以 3， a[href target=iframe_a]>b*3 按下 tab 鍵自動補全代碼。很明顯，這不是我們要的代碼。

這怎么辦呢？聰明的你一定想到了，在小學數學里，通過添加小括號來設置運算優先級的法則。

我們在 a 的前面，b 的后面填上一對括號， (a[href target=iframe_a]>b)*3 我們把這個 emmet 放到注釋里保存一下。

將光標移至 emmet 語句的結尾，按下 tab。期望的代碼生成了。

如果你是完美主義者，這個代碼你也不滿意，能不能換行顯示三個 a 標簽呢？大家跟我一起做：

點擊 VSCode 左下角的齒輪圖標，再點擊設置，打開設置窗口。

點擊擴展菜單，再點擊 emmet，找到 Syntax(森太課思) Profiles，在 settings（賽ten 思）.json 中編輯。

在這里輸入 html 冒號大括號，在大括號里寫入 inline_break 冒號 2，表示標簽數大于兩組，就折行顯示。

"html": {

"inline_break": 2

關閉設置。

把剛才保存的 emmet 命令再拷貝過來，按下 tab 鍵，完美的代碼生成了！

給三個a 標簽填好鏈接地址和文本內容。

這里需要注意，a 鏈接的地址可以是互聯網的網站地址，也可以是你自己制作的本地頁面地址，這些頁面都可以在 iframe 中顯示。

我們發現三個鏈接的target屬性都指向了同一個iframe。保存一下頁面。

回到瀏覽器，刷新。分別點擊三個鏈接，iframe 里分別顯示了三個網站的頁面。

文章配套視頻鏈接「鏈接」

在線咨詢

上一篇：web前端30秒之顯示隱藏與toggle
下一篇：「項目實戰」從終端到瀏覽器：實現 ANSI 字體在前端頁面的彩色展示

您的項目需求

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

整合營銷服務商

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

明

參考代碼

您的項目需求