iframe基本使用

使用场景：页面大部分相同，少部分不一样。比如系统，每一个页面的left_nav和top内容一致，右下边内容在改变。

优点：提高页面代码的重复使用率，让我们偷懒。

缺点：页面url地址没有改变。

本案例用layui，搭建一个简单的后台管理系统框架。

文件结构如下，layui在官网下载即可。

index.html页面代码

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

< link rel= "stylesheet" href= "./layui/css/layui.css" >

< style >

html,body {

width: 100%;

height: 100%;

}

.side_left {

height: 100%;

}

.message {

margin: -8px 28px 0 !important;

border-radius: 50%;

top: 31% !important;

}

.title {

position: absolute !important;

/* left: 200px; */

top: 0;

color: rgba( 255, 255, 255, .7);

padding: 0 20px;

line-height: 60px;

font-size: 22px;

font-weight: 600;

}

.content {

top: 100px;

}

< / style >

</ head >

< body >

< nav class= "ayui-layout-admin" style= "height:60px;background:#393D49;" >

< h1 class= "title" >后台管理系统 </ h1 >

< ul class= "layui-nav layui-layout-right" >

< li class= "layui-nav-item" >

< a href= "#" >通知

< span class= "layui-badge message" >9 </ span >

</ a >

</ li >

< li class= "layui-nav-item" >

< a href= "#" >退出

</ a >

</ li >

< li class= "layui-nav-item" >

</ li >

</ ul >

</ nav >

< ul class= "layui-nav layui-nav-tree layui-inline side_left" >

< li class= "layui-nav-item layui-this" >

< a href= "./index.html" >

< i class= "iconfont icon-shouye1" ></ i >

首页

</ a >

</ li >

< li class= "layui-nav-item layui-nav-itemed" id= "changeToSet" >

< a href= "javascript:;" >

< i class= "iconfont icon-shouye1" ></ i >

基础设置

</ a >

</ li >

</ ul >

< div class= "layui-body content" >

</ div >

< script src= "./jquery-3.2.1.min.js" > < / script >

< script src= "./layui/layui.js" > < / script >

< script >

$( function(){

$( '#changeToSet'). on( 'click', function(){

$(window.parent.document).find('#contentIframe').attr('src','./set.html')

$( this). addClass( 'layui-this'). siblings(). removeClass( 'layui-this');

})

< / script >

</ body >

</ html >

注意：里面iframe标签的使用，通过改变iframe标签的src属性来改变iframe是内容

以下是main.html代码

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

< body >

< h1 >这是首页标题 </ h1 >

< p >你好，我是首页页面内容 </ p >

</ body >

</ html >

以下是set.html代码

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

< body >

< h1 >这是基础设置页面标题 </ h1 >

< p >你好，我是基础设置页面内容 </ p >

< button id= "changeToTest1" >点击切换到test1页面 </ button >

< script src= './jquery-3.2.1.min.js' > < / script >

< script >

$( function(){

$( '#changeToTest1'). on( 'click', function(){

$( window. parent. document). find( '#contentIframe'). attr( 'src', './test1.html')

})

< / script >

</ body >

</ html >

以下是test1.html页面代码

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

< body >

< h1 >这是test1页面标题 </ h1 >

< p >你好，我是test1页面内容 </ p >

</ body >

</ html >

打开index.html页面显示效果

点击基础设置的页面是

后期在使用过程中，发现iframe有个坑，即在顶级页面，点击跳转到子页面，再点击顶级页面，但是页面显示的是子页面的内容。例如，在上图中的基础设置页面，点击按钮点击切换到test1页面，再点击左边导航基础设置，但是页面显示的是test1.html页面的内容，即无法回到顶级页面基础设置页面，此问题的解决方案是给test1.html添加一个面包屑或者返回按钮。

iframe基本使用相关推荐

Selenium2+python自动化24-js处理富文本（带iframe）
前言上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的 ...
FRAME与IFRAME
FRAME与IFRAME 框架概念 : 所谓框架便是网页画面分成几个框窗,同时取得多个 URL.只需要转载于:https://www.cnblogs.com/vibratea/archive/200 ...
用原生js的postMessage实现iframe传值，也可以用于跨域嵌套iframe传值
Window postMessage() 方法定义和用法 postMessage() 方法用于安全地实现跨源通信. 语法 otherWindow.postMessage(message, targe ...
iframe几种常用代码片段
<iframeid="SGframe"src="外部文件名.html"frameborder="no"scrolling=" ...
ASP.NET小收集：IFrame使用
使用Iframe制作一个固定框架,很方便与象后台网站之类的页面 1<htmlxmlns="http://www.w3.org/1999/xhtml">2<head ...
iframe自动调整高度能在IE5里实现吗
偶已经理解到style="height:expression(main.document.body.scrollHeight)"只对第一次显示的内嵌网页有效,如果里面的内容更新必须 ...
如何实现iframe(嵌入式帧)的自适应高度
好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄 ...
“画中画”效果--谈IFRAME标签的使用
作者:秋实文章来源:天极网页陶吧纵观时下网站,本来网速就有些慢,可是几乎每页都要放什么Banner,栏目图片,版权等一大堆雷同的东西,当然,出于网站风格统一.广告效应的需要,本无可厚非,可毕 ...
Iframe 用法浅析
解释成"浏览器中的浏览器"很是恰当 <iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth ...
ajax iframe实现文件上传,iframe实现Ajax文件上传效果示例
avascript部分 ajax 文件上传~~ window.οnlοad=function(){ var form=document.getElementsByTagName('form')[0]; ...

iframe基本使用

iframe基本使用相关推荐

最新文章

热门文章