技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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

作者:admin    时间:2018-1-17 11:20:33    浏览:

网页使用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>

execcodegetcode

方法二

通过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 。

execcodegetcode

方法三

上面两个方法都是用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 文件(导读:JQuery.js最新及各版本调用或下载)。

execcodegetcode

标签: iframe  frame  JQuery  
x
  • 站长推荐
/* 左侧显示文章内容目录 */