一、什么是iframe？
<iframe>它的语法如下：
<iframe src="url"> </iframe>
其中src属性用于指定嵌入文档的URL，可以使用绝对路径或相对路径。除了src属性，
<iframe>二、怎样应用iframe？
在使用iframe时，需要注意以下几点：
1、安全性
在使用iframe时，需要避免与任何具有恶意攻击的网站进行连接。为了减少安全隐患，在使用iframe时可以指定 sandbox 属性，如下：
<iframe src="url" sandbox="allow-top-navigation allow-scripts">
</iframe>
该属性详细介绍：
allow-top-navigation：允许被嵌入文档中的iframe中导航到的顶级导航内容（例如，通过用户输入）。没有该属性，iframe中的一个网站可以通过点击打开与嵌套页面相同的页面，从而将用户重定向到网络钓鱼网站等页面。
allow-scripts: 允许iframe 中运行脚本。（默认情况下不允许）
实际使用时根据需要的安全性进行选择。
2、尺寸调整
在使用iframe时，如果需要固定其大小，可以使用height、width属性。但是当页面发生缩放时，iframe中的文档却未必缩放。为了使iframe中嵌入的文档能够自适应大小，可以使用JavaScript实现。
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
iframe.width = iframe.contentWindow.document.documentElement.scrollWidth + 'px';
}其中，
contentWindowdocument
onload
三、iframe应用实例
1. 嵌入其他网站的内容
在以下示例中，我们可以通过
<iframe><!DOCTYPE html>
<html>
<head>
<title>Iframe Demo</title>
</head>
<body>
<iframe src='https://www.baidu.com'></iframe>
</body>
</html>2. 表单嵌入其他网站
在以下示例中，我们将会通过
<iframe><!DOCTYPE html>
<html>
<head>
<title>Iframe表单例子</title>
</head>
<body>
<form id="myForm" method="post" action="https://www.baidu.com">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Submit">
</form>
<iframe id="myIframe" name="myIframe"
sandbox="allow-same-origin allow-scripts"
style="display:none"></iframe>
<script>
const myForm = document.querySelector('#myForm');
const myIframe = document.querySelector('#myIframe');
myForm.target = myIframe.name;
myForm.addEventListener('submit', () => {
myIframe.addEventListener('load', () => {
alert('提交成功！');
});
});
</script>
</body>
</html>3. 嵌入响应式页面
在以下示例中，我们将会通过JavaScript实现自适应iframe大小的目标。
<!DOCTYPE html>
<html>
<head>
<title>Iframe响应式例子</title>
</head>
<body>
<iframe src="https://www.baidu.com/" frameborder="0"
scrolling="no" onload="resizeIframe(this)"></iframe>
<script type="text/javascript">
function resizeIframe(obj) {//自适应设置
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';// 通过子页面的高度
}
</script>
</body>
</html>4. 组合使用
在以下示例中，我们将综合应用iframe的各个部分，包括嵌入其他网站内容、自适应、表单提交功能等。
<!DOCTYPE html>
<html>
<head>
<title>组合使用iframe例子</title>
</head>
<body>
<div><h3>菜鸟教程中的Iframe综合应用小例子</h3></div>
<hr>
<form id="myForm" method="post" action="https://www.baidu.com">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Submit">
</form>
<iframe id="myIframe" name="myIframe" style="width:100%;height:500px;"
sandbox="allow-same-origin allow-scripts"
src="https://www.baidu.com"></iframe>
<script type="text/javascript">
const myForm = document.querySelector('#myForm');
const myIframe = document.querySelector('#myIframe');
myForm.target = myIframe.name;
myForm.addEventListener('submit', () => {
myIframe.addEventListener('load', () => {
alert('提交成功！');
});
});
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</body>
</html>
