前言
在学习使用EasyUI(tabs选项卡)的时候,使用iframe内嵌入跳转页面,
既然iframe可以跳转加载本地页面,觉得就能使用其他动态的页面下面来探究。
$(function(){
var ctx = $("#ctx").val();
$('#tt').tree({
url:ctx+'/permission.action?methodName=menuTree',
onClick: function(node){
//alert(node.text); // 在用户点击的时候提示
//debugger;
// <iframe scrolling="no" frameborder="0" src="" width="99%" height="99%"></iframe>
if($('#bookTabs').tabs('exists',node.text)){
//切换选项卡
$('#bookTabs').tabs('select',node.text)
}else{
//新增选项卡
var src = node.attributes.self.url;
if(src){
var content ='<iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';
$('#bookTabs').tabs('add',{
title:node.text,
content:content,
closable:true,
tools:[{
/*iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
} */
}]
});
}
}
}
});
})
iframe的使用
1.通过iframe实现跨域;(就是嵌入其他页面的)
2.通过iframe解决Ajax的前进后退问题
3.通过iframe实现上传。
(Easyui中form组件就是用的iframe,实现表单提交时,可以提交上传)
4,对低版本html不支持 iframe 元素的。
我们可以把需要的文本放置在 <iframe> 和 </iframe> 之间,
这样就可以应对浏览器了。
<iframe width=420 height=330 frameborder=0 scrolling=auto src="URL">
</iframe>
iframe的优缺点
优点:
-
页面和程序分离,不会受到外界js或者css的影响, 便于使用
-
可以通过iframe嵌套通用的页面, 提高代码的重用率,
比如页面的头部样式和底部信息 -
重新加载页面时, 不需要重载iframe的内容, 增加页面重载速度.
-
iframe可以解决第三方内容加载缓慢的问题.
缺点:
-
会产生很多页面,不容易管理
-
iframe兼容性较差
-
iframe有一定的安全风险
内联框架iframe的使用
1.使用iframe可以在一个表格内调用一个外部文件.
2.iframe标记的常用属性是:
<Iframe src="URL" width="#" height="#"
scrolling="[OPTION]" frameborder="#" name="main"></iframe>
3.iframe中属性包含的作用:
src:文件的路径,既可是HTML文件,也可以是文本、ASP等;
width、height:"内部框架"区域的宽与高;
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时,滚动选项;
如果为 NO,则不出现滚动条;
如果为Yes,则显示;
如果为 Auto:则自动出现滚动条
FrameBorder:设置或获取是否显示框架的边框。(1,0 或 no,yes)
name:框架的名字,用来进行识别。
例如:
如果想用父框架控制内部框架时,可以使用: target="框架的名字"来控制。
4.iframe常用的属性表:
快速使用iframe嵌入
1.在项目中如何快速使用iframe内嵌html页面。
2.列如:一些大部分的网站上都有自己开放的小插件
,天气插件,视频插件等等。
3.我们就可以利用iframe的属性src嵌入插件地址进行访问
链接: 跳转天气网
4.通过天气网的小插件代码生成器预览成合适的样式
5.界面iframe引入到自己想要放的指定位置
<div style="text-align: right;">
<!-- <iframe width="700" scrolling="no"
height="70" frameborder="0" allowtransparency="true"
src="//i.tianqi.com/index.php?c=code&id=2&icon=1&py=yueluqu&num=3&site=12"></iframe> -->
<iframe width="500" scrolling="no"
height="15" frameborder="0"
allowtransparency="true"
src="//i.tianqi.com/index.php?c=code&id=11&icon=1&py=yueluqu&site=12"></iframe>
</div>
6、带图标的风格天气
7.文本滚动风格天气
8.如何引入小视频代码如下:(src填写视频链接的通用iframe代码)
引入iframe通用代码:
<style type="text/css">
.video-btn{
position: absolute;
width:1080px;
height: 500px;
background:black;
top:50px;
left: 0px;
right: 0px;
margin: 0 auto;
display: none;
z-index: 101;
}
.video-area{
width:100%;
height: 100%;
background:black;
}
iframe{
width: 100%;
height: 100%;
}
.video-shut{
height:25px;
width:25px;
border-radius: 12.5px;
font-size:medium;
color:black;
float:left;
text-align: center;
font-weight: bolder;
background: white;
display: block;
position: absolute;
top: -15px;
right: -15px;
}
#shadow{
position: absolute;
opacity: 0.5;
filter:alpha(opacity=50);
bottom:0;
left: 0;
right: 0;
top: 0;
background:black;
z-index: 100;
display: none;
}
</style>
</head>
<body>
<center>
<div class="main" style="height: 100px;margin-top: 100px;">
<a href="javascript:;" class="video" id="video"><img src="http://i1.hdslb.com/bfs/archive/62915c7879fb3149bd8e21fb6e3c06749b7b40b2.jpg@160w_100h.webp"></a>
</div>
<div class="video-btn" id="video-btn">
<div class="video-area" id="video-area"></div>
<a class="video-shut" id="video-shut">×</a>
</div>
<div id="shadow"></div>
</center>
</body>
</html>
<script type="text/javascript">
var obtn=document.getElementById('video');
var ovideo=document.getElementById('video-btn');
var oatn=document.getElementById('video-area');
var oshut=document.getElementById('video-shut');
var oshadow=document.getElementById('shadow');
obtn.οnclick=function () {
ovideo.style.display='block';
oshadow.style.display='block';
oatn.innerHTML='<iframe src="#"</iframe>';
}
oshut.οnclick= function () {
ovideo.style.display='none';
oshadow.style.display='none';
oatn.innerHTML="";
}
</script>
9.使用iframe引入小视频