上次说到
如何我们的数据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,,querySelectorAlllet 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>
