js和jquery给iframe src赋值的3种方法

 

网页使用iframe嵌入网页时，有时候需要动态处理src的值，而不是写死的，所以我们需要知道如何给iframe src赋值，通常是使用js或jquery来实现。本文介绍js和jquery给iframe src赋值的3种方法。

方法一

这是最常用的js给iframe src赋值的方法，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>iframe src赋值的方法</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<iframe frameborder="1" id="barframe" ></iframe>

</body>

</html>

<script type="text/javascript">

document.getElementById("barframe").src = "http://localhost/EXAMPLE/iframe/example.html";

</script>

方法二

通过js创建一个iframe元素，然后再给该元素src赋值，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>iframe src赋值的方法</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

</body>

</html>

<script type="text/javascript">

var myIframe = document.createElement('iframe');

myIframe.src = 'http://localhost/EXAMPLE/iframe/example.html';

document.body.appendChild(myIframe);

</script>

最后一句 document.body.appendChild(myIframe); 是表示在 body 里添加刚定义的 myIframe 这个控件。

我们也可以把该iframe添加到某一个div容器里，写法如下：document.getElementById("div1").appendChild(myIframe); ， div1是该div容器的id 。

方法三

上面两个方法都是用js来实现的，其实我们也可以用jquery来实现，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>iframe src赋值的方法</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://www.webkaka.com/script/jquery-1.4.2.min.js" type="text/javascript"></script>

<script>

$(document).ready(function() {

  $('#barframe').attr('src', 'http://localhost/EXAMPLE/iframe/example.html');

});

</script>

</head>

<body>

<iframe frameborder="1" id="barframe"></iframe>

</body>

</html>

特别注意，上述jquery代码不能缺少 $(document).ready(); ，否则iframe src赋值失败，除非把jquery的代码放在 <iframe ... 的html代码后面。此外，还需要在 <head></head> 里引用 jquery.js 文件

js和jquery给iframe src赋值的3种方法的更多相关文章

  1. js 跨域 Jquery取得iframe中元素的几种方法

    http://www.jb51.net/article/34942.htm 收集利用Jquery取得iframe中元素的几种方法 : 父页面访问子页面 $(document.getElementByI ...

  2. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

  3. Jquery取得iframe中元素的几种方法（转载）

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon ...

  4. [浪风转载]Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon ...

  5. Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...

  6. Jquery取得iframe中元素的几种方法

    [jquery]获取iframe中的body元素: $("iframe").contents().find("body").html(); [使用jquery操 ...

  7. 使用JS和JQuery 阻止表单提交的两种方法

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. jquery得到iframe src属性值的方法

    这篇文章主要介绍了jquery得到iframe src属性值的方法,很简单,很实用,需要的朋友可以参考下 取得iframe src属性的的值: Html代码 <!DOCTYPE HTML> ...

  9. jQuery 判断checkbox是否被选中 4种方法

    下午写JS验证,有一个需求需要判断 checkbox是否被选择,查阅相关资料后,总结以下4种方法,分享给大家. <!DOCTYPE html> <html lang="en ...

随机推荐

  1. mvc5新特性RouteAttribute特征路由

    mvc5新特性RouteAttribute特征路由,本文讲述如何开启mvc5的RouteAttribute路由功能并附上一个实例说明RouteAttribute是怎么工作的 mvc5新特性RouteA ...

  2. PandoraBox 支持3G无线上网卡(联通卡3G卡)（一）

    一:笔者采用的是系统是OpenWrt之PandoraBox,内核版本3.3.8:硬件设备是MTK的7620开发板. 其中怎么搭建openwrt开发环境在此不用多说,因为既然想实现3G无线上网卡拨号上网 ...

  3. iOS 各种编译错误汇总

    1.error: macro names must be identifiers YourProject_prefix.pch 原因: 因为你弄脏了预处理器宏,在它处于<Multiple Val ...

  4. 常用SQL备忘录

    联表删除: delete t1,t2 from table_name t1 left join t2 on t1.id=t2.id where t1.id=23 (ps:该语句在mysql 5.0之前 ...

  5. iOS 如何改变表视图分割线在iOS7中的默认偏移

    - (void)viewDidLoad { [super viewDidLoad]; self.automaticallyAdjustsScrollViewInsets = NO; if ([self ...

  6. Hive 特性及原理

    特点:Hive是构建在hadoop之上的数据仓库.数据存储在hdfs上,数据计算用的mapreduce框架.用户无需掌握MR的编写,通过类SQL语句即可自动生成查询计划. 主要内容:     接入入口 ...

  7. (linux)platform_driver_probe与platform_driver_register的区别

      [驱动注册]platform_driver_register()与platform_device_register()          设备与驱动的两种绑定方式:在设备注册时进行绑定及在驱动注册 ...

  8. YTU 2425: C语言习题 输出月份

    2425: C语言习题 输出月份 时间限制: 1 Sec  内存限制: 128 MB 提交: 476  解决: 287 题目描述 编写一程序,输入月份号,输出该月的英文月名.例如,输入3,则输出Mar ...

  9. 计算机学院大学生程序设计竞赛（2015’12）Pick Game

    Pick Game Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  10. Microsoft.XMLHTTP基本用法

    客户端调用XMLHTTP的过程很简单,只有5个步骤:1.创建XMLHTTP对象2.打开与服务端的连接,同时定义指令发送方式,服务网页(URL)和请求权限等.客户端通过Open命令打开与服务端的服务网页 ...