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

2021-7-6 前端达人

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