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. 使用MegaCli查看raid信息

    LSI SAS based MegaRAID driver http://www.lsi.com/downloads/Public/Nytro/downloads/Nytro%20XD/MegaCli ...

  2. （转） Universal-Image-Loader使用大全（史上最屌）

    转载自http://blog.csdn.net/zenjj11/article/details/38728481 项目介绍: Android上最让人头疼的莫过于从网络获取图片.显示.回收,不论什么一个 ...

  3. adb的那点小事——360电视助手实现研究

    欢迎转载,转载请注明:http://blog.csdn.net/zhgxhuaa 1.   前言 1.1.  行业背景简单介绍 当下,智能家居与智能穿戴设备无疑是继智能手机后两个最热门的方向.而智能家 ...

  4. device not managed by NetworkManager

    Bringing up interface eth0:Error:Connection activation failed:Device not managed by  NetworkManager ...

  5. iOS开发——高级篇——多线程的安全隐患

    资源共享 1块资源可能会被多个线程共享,也就是多个线程可能会访问同一块资源 比如多个线程访问同一个对象.同一个变量.同一个文件 当多个线程访问同一块资源时,很容易引发数据错乱和数据安全问题   一.解 ...

  6. centos笔记-安装特定版本的mysql

    centos6的yum默认安装的mysql是5.1版, 如果要安装5.6.16 版,有三个办法 1.yum方式, 这个方式的好处是通过yum安装卸载都很方便,坏处是版本无法详细制定,比如官方版本yum ...

  7. VS1053 datasheet 解读笔记

    pdf  10 pdf 11 ` 左右声道 负载,注意这里的负载指LEFT 到GBUF,RIGHT到GBUF.所以后面会有说明GBUF一定不能连接到GND. pdf 14 pdf 14 从上面的引脚定 ...

  8. finally{} 代码块

    package Exception; /* * finally{}代码块 * * finally{]代码块是必须要被执行的,不管异常是否处理成功,该代码块里面的代码体都会被执行, */ public ...

  9. 更改scroll样式

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 2px; height: 80%; background: #fff; } /*定 ...

  10. Linux内核日志开关

    Linux内核日志开关 1.让pr_debug能输出 --- a/kernel/printk/printk.c +++ b/kernel/printk/printk.c @@ -59,7 +59,7 ...