众所周知,iframe是h5的一个原有的功能
但是,有些时候iframe我们如果随心所欲的使用的时候,我们在多个iframe共同使用的时候,就涉及到了先后的问题,这个问题就需要用到iframe的延时效果来解决,也就是jquery来解决。
先来说一下iframe
<iframe src='1.html'></iframe>
iframe常用属性:
frameborder:是否显示边框
height:作为一个普通元素高度
width:作为一个普通元素宽度
name:框架名称
scrolling:框架是否滚动
src:内框架的地址
这个就是常用的iframe的方法。
接下来用到了jquery.js的使用,这里我们方便了一下。
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
接下来用到了jquery的一个属性,就是attr()
这里用到的就是比较简单的一个方法,就是
用到了开头的那张照片的属性。
然后实现了iframe的延时效果。
并且还用到了setTimeout属性进行最后的延时
<script>
$(function(){
setTimeout(function(){$("#go").attr("src","http://www.csdn.net")},5000)
})
</script>
<iframe id="go" src="sdfsdf" ></iframe>
在这里补充一下html5当中iframe中的新的属性当中比较常用的部分
很重要
很重要
sandbox属性
1.运行iframe页面能够提交表单
from.html
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 表单页面 </title>
</head>
<body>
<form action="addUser.action">
用户名:<input type="text" name="name"/><br>
密码:<input type="password" name="pass"/><br>
<input type="submit" value="提交"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 行内框架 </title>
</head>
<body>
<iframe src="form.html" width="300" height="120"
sandbox="allow-forms"></iframe>
主页面内容
</body>
</html>
这样iframe过来的页面就能提交表单,在通过定位和背景来调节,那么理论上iframe和单纯页面内也可以互相转换
2.允许框架中使用JavaScript脚本
script.html
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 脚本页面 </title>
</head>
<body>
<a href="" onclick="this.innerHTML=this.innerHTML + '有趣'; alert('确定');">
单击我</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 行内框架 </title>
</head>
<body>
<iframe src="scripts.html" width="300" height="120"
sandbox="allow-scripts"></iframe>
主页面内容
</body>
</html>
实现了iframe的script功能,我认为一般与表单提交啊等联用
上面的这些属性的功能就是我在使用iframe的时候比较常用的属性了,接下来如果再用到这里面没有用到过的属性,会加以补充
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}