上次说到
如何我们的数据html页面返回到服务器,服务器到html.submit不要了,直接button普通按钮,action也不用,,,fetch直接异步请求,那么就会有数据发送到服务器
Repones.write写入就行了,直接写的就是html页面演示
这次我们来看iframe,
H5加入了传输页面的新的事件
注意
link、a ； href
script，img 、iframe； src直接显示上去
来源:https://blog.csdn.net/m0_72735063/article/details/134604808?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22134604808%22%2C%22source%22%3A%22m0_72735063%22%7D
https://blog.csdn.net/m0_72735063/article/details/134604808?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22134604808%22%2C%22source%22%3A%22m0_72735063%22%7D
iframe默认300*150
注意:
内边距,内容区尺寸,实际的是左右边框所以box-sizing,现在的宽度就是内容加上左右上下
上右下左是padding设计的,
捕获imframe要name
看看>与空格的关系直接子元素,,直接子元素iframe 所有后代元素 iframe
怎么才能把iframe框线去掉呢.把我们的边框线border=none
因为是块级元素,,所以要设计为float
怎么把超链接的下划线去掉,,textcotion设置为none,,
下面我们要吧链接的默认事件取消,事件都是冒泡的
foreach接收回调函数,当前元素,在链表的索引,整个列表或者
设置padding否则文字就顶住了,不好看
为什么这两个不一样呢
let links=document.querySelectorAll("#list a");//是个列表都有一个link,,querySelectorAll
let iframe=document.querySelector("iframe[name=page]")
因为list是个选择符--里面的所有a,,iframe是一个标签
提升:
load是页面加载完后才能有,注册事件一般都是写在我们的load里面
还是能首先显示我们的代码
准备代码:
a.html
b.html
c.html
d.html
imframe.html
获取list的全部querySelectorAll,写到哪里定义一个iframe获取iframe标签,每一个link都有一个点击事件,阻止事件发生链接的href给iframe就OK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#container{
width: 100%;
height: 800px;
}
#list{
width: 10%;
height: inherit;
box-sizing: border-box;
float: left;
padding:10px 20px;
background: #eee;
}
#wrapper{
width: 90%;
height: inherit;
box-sizing: border-box;
float: right;
padding:10px 20px;
background: #ccc;
}
/*#wrapper>iframe[name="page"]*/
#wrapper>iframe[name=page]{
width:90%;
height: 100%;
border: none;
}
</style>
<body>
<div id="container">
<div id="list">
<p><a href="a.html">a界面</a></p>
<p><a href="b.html">b界面</a></p>
<p><a href="c.html">c界面</a></p>
<p><a href="d.html">d界面</a></p>
</div>
<div id="wrapper">
<iframe name="page" src="a.html" ></iframe>
</div>
</div>
<script>
window.addEventListener("load",(event)=>{
let links=document.querySelectorAll("#list a");//是个列表都有一个link,,querySelectorAll
let iframe=document.querySelector("iframe[name=page]");//写到里面去
links.forEach((link)=>{//link用于链接触发事件对象
link.addEventListener("click",(event)=>{
event.preventDefault();
iframe.src=event.target.href;
// alert(event.target.href)
})
})
})
</script>
</body>
</html>
