iframe（标签的使用）

最新推荐文章于 2024-04-15 15:25:05 发布

h0824_

最新推荐文章于 2024-04-15 15:25:05 发布

阅读量5.4k

点赞数 1

本文链接：https://blog.csdn.net/m0_46690290/article/details/107011714

版权

前言

在学习使用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引入小视频
在这里插入图片描述

h0824_

关注

1
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
iframe（标签的使用）

目录iframe的使用iframe的优缺点内联框架iframe的使用快速使用iframe嵌入iframe的使用1.通过iframe实现跨域;(就是嵌入其他页面的)2.通过iframe解决Ajax的前进后退问题3.通过iframe实现上传。(Easyui中form组件就是用的iframe，实现表单提交时，可以提交上传)4，对低版本html不支持 iframe 元素的。我们可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对浏览器了。
复制链接

扫一扫