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 文件