|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
js和jquery給iframe src賦值的3種方法
作者:admin 時間:2018-1-17 11:20:33 瀏覽:網(wǎng)頁使用iframe嵌入網(wǎng)頁時，有時候需要動態(tài)處理src的值，而不是寫死的，所以我們需要知道如何給iframe src賦值，通常是使用js或jquery來實現(xiàn)。本文介紹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創(chuàng)建一個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來實現(xiàn)的，其實我們也可以用jquery來實現(xiàn)，代碼如下：
<!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://howtostagehomes.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最新及各版本調用或下載）。
- 站長推薦
