实现iframe延时作用jquery方法

18648165727

发布于 2019.02.09 18:32 阅读 2661 评论 1

众所周知，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的时候比较常用的属性了，接下来如果再用到这里面没有用到过的属性，会加以补充

发表评论