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">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iframe src赋值的方法</title>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
</head>
<body>
<iframeframeborder="1"id="barframe" ></iframe>
</body>
</html>
<scripttype="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">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iframe src赋值的方法</title>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
<scripttype="text/javascript">
varmyIframe=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">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iframe src赋值的方法</title>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
<scriptsrc="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>
<iframeframeborder="1"id="barframe"></iframe>
</body>
</html>

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

转载于:https://www.cnblogs.com/ylht/p/10249566.html

js和jquery给iframe src赋值的3种方法相关推荐

解析Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下 DOM方法:父窗口操作IFRAME:window.frames[&quo ...
Jquery取得iframe中元素的几种方法（转载）
Jquery取得iframe中元素的几种方法(转载) iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME: ...
Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID，反之也行！...
query取得iframe中元素的几种方法在iframe子页面获取父页面元素代码如下: $('#objId', parent.document); // 搞定... 在父页面获取iframe子页 ...
html tab与jQuery,js与jquery分别实现tab标签页功能的方法
本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 *{margin: 0;padding: 0;} #myul li {li ...
ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...
JQuery调用iframe子页面函数/对象的方法
JQuery调用iframe子页面函数/对象的方法例子: 父页面有个ID为mainfrm的iframe,iframe连接b.html,该页面有个函数test 在父页面调用b.html的test方法为: ...
jq中法可以发起ajax请求的方法有,js与jQuery终止正在发送的ajax请求的方法
本文实例讲述了js与jQuery终止正在发送的ajax请求的方法.分享给大家供大家参考,具体如下: 核心:调用XMLHttpRequest对象上的abort方法 jquery的ajax方法有自己的超时 ...
jQuery添加DOM节点常用的5种方法
一.内部插入(前插入.后插入): <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
易语言写组合框内容MySQL_易语言组合框赋值的几种方法
在易语言中,给组合框赋值就是给组合框加上许多项目,这些项目我们可以通过编写源代码的时候就事先修改设置好它,同样我们也可以通过后期使用时让代码来修改它,今天就教大家事先给组合框赋值和事后给组合框赋值的两 ...
js 把字符串转成json对象的三种方法
js 把字符串转成json对象的三种方法不管字符串是否含有转义字符,都能转换成 Json 对象 1, js自带的eval函数,其中需要添加小括号eval('('+str+')'); function ...

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

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

方法一

方法二

方法三

js和jquery给iframe src赋值的3种方法相关推荐

最新文章

热门文章