H5ke12--1--iframe标签制作页面的使用

上次说到

如何我们的数据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%7Dhttps://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

    
        
        
    
    

    


    

a界面
b界面
c界面
d界面