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

<!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>