整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
站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 name="iframe_a">
<a href="http://www.qfedu.com/" target="iframe_a">千锋教育</a>
我们再来看个例子，当点击三个链接，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 里分别显示了三个网站的页面。
文章配套视频链接「链接」
*请认真填写需求信息，我们会在24小时内与您取得联系。
