JavaScript-iframe

最新推荐文章于 2024-07-24 16:08:38 发布

可可鸭~

最新推荐文章于 2024-07-24 16:08:38 发布

阅读量3.5k

点赞数 1

分类专栏： JavaScript学习文章标签： html5 html css3

本文链接：https://blog.csdn.net/qq_43547255/article/details/121501245

版权

JavaScript学习专栏收录该内容

26 篇文章 4 订阅

订阅专栏

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>

在这里插入图片描述

可可鸭~

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript-iframe

JavaScript-iframe经常进行页面布局的人对于HTML中的iframe标签一定不陌生，iframe标签是一个内联框架，换言之就是用来在当前 HTML 页面中嵌入另一个文档的。<iframe> 标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。height可以设置框架显示的高度width可以设置框架显示的宽度name可以定义框架的名称frameborder用来定义是否需要显示边框，取值为1表示需要边框scro
复制链接

扫一扫