JavaScript-iframe
经常进行页面布局的人对于HTML中的iframe标签一定不陌生，iframe标签是一个内联框架，换言之就是用来在当前 HTML 页面中嵌入另一个文档的。
<iframe>标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。
height可以设置框架显示的高度
width可以设置框架显示的宽度
name可以定义框架的名称
frameborder用来定义是否需要显示边框，取值为1表示需要边框
scrolling用来设置框架是否需要滚动条，取值可以是yes,no,auto src用于设置框架的地址，可以使页面地址，也可以是图片地址 align用于设置元素对齐方式，取值可以是left，right，top，middle，bottom 以上属性可以根据需要进行设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.control{
width: 700px;
height: 300px;
display: flex;
flex-direction: row;
}
.left{
width: 200px;
height: 300px;
display: flex;
flex-direction: column;
background-color: pink;
}
.right{
width: 500px;
height: 300px;
background-color: skyblue;
}
</style>
<body>
<!--
iframe:可以在页面中嵌入页面
src：设置嵌入页面的网络地址
width：设置嵌入的网页宽度
height：设置嵌入的网页高度
scrolling：设置是否可以滚动
sandbox html5新特性，用于限制iframe的功能
-->
<div class="control">
<div class="left">
<button class="btn">国外新闻</button>
<button class="btn">国内新闻</button>
<button class="btn">娱乐新闻</button>
<button data-src="http://www.taobao.com" class="links">淘宝</button>
</div>
<div class="right">
<iframe src="test1.html" frameborder="0" width="500" height="300"></iframe>
</div>
</div>
<script>
var btn = document.querySelectorAll(".btn");
var links = document.querySelector(".links");
var iframe = document.querySelector("iframe");
btn.forEach(function(item,index){
item.onclick = function(){
iframe.setAttribute("src","test"+(index+1)+".html")
}
})
links.onclick = function(e){
console.log(e)
iframe.setAttribute("src",e.target.dataset.src)
}
// iframe.onload = function(){
// console.log(iframe.contentDocument.querySelector("h1"));
// iframe.contentDocument.querySelector("h1").style.backgroundColor = "red";
// }如果不是自己的页面，非同源(同ip同协议同端口)不可以修改他的代码
</script>
</body>
</html>
