iframe 简单实现主页面和子页面嵌套

最新推荐文章于 2024-04-17 16:54:23 发布

臧小川

最新推荐文章于 2024-04-17 16:54:23 发布

阅读量1.4k

点赞数

分类专栏： HTML 文章标签： html css html5

臧小川

本文链接：https://blog.csdn.net/chuan0106/article/details/119905942

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

iframe是内联元素,你可以在浏览器中测试,它可以和span标签并排,而不会独占一行。”

使用场景

页面大部分相同少部分不同
优点:提高代码复用性
缺点:不会改变页面url地址

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    text-align: center;
  }

  h1 {
    color: pink;
  }

  #myrame {
    width: 800px;
    height: 800px;
    margin-top: 10px;
  }
</style>

<body>
  <h1>上方导航条</h1>
  <div class="a">
    <a href="https://ant.design/index-cn" target="mainFrame">antd</a>
    <a href="https://react.docschina.org/" target="mainFrame">react</a>
  </div>

  <iframe id="myrame" src="https://blog.csdn.net/chuan0106?spm=1011.2124.3001.5343" 
  frameborder="0" align="center"name="mainFrame"></iframe>
</body>

</html>

获取 iframe 的内容

 var iframe = document.getElementById("myrame"); //获取iframe标签
 var iwindow = iframe.contentWindow; //获取iframe的window对象
 var idoc = iwindow.document; //获取iframe的document对象;

常用属性

iframe常用属性:

frameborder:是否显示边框，1(yes),0(no)
height:高度，
width:宽度、
name:框架的名称，window.frames[name]时专用的属性。
scrolling:框架的是否滚动。yes,no,auto。
src：内框架的地址，可以使页面地址，也可以是图片的地址。
srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么作用
sandbox: 对iframe进行一些列限制，IE10+支持
align：left,right,top,middle,bottom HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的元素来对齐。

臧小川

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
iframe 简单实现主页面和子页面嵌套

使用场景页面大部分相同少部分不同优点:提高代码复用性缺点:不会改变页面url地址<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i
复制链接

扫一扫