2021-7-6 前端達(dá)人
網(wǎng)頁使用iframe嵌入網(wǎng)頁時(shí)，有時(shí)候需要?jiǎng)討B(tài)處理src的值，而不是寫死的，所以我們需要知道如何給iframe src賦值，通常是使用js或jquery來實(shí)現(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)建一個(gè)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 這個(gè)控件。
我們也可以把該iframe添加到某一個(gè)div容器里，寫法如下：document.getElementById("div1").appendChild(myIframe); ， div1是該div容器的id 。
上面兩個(gè)方法都是用js來實(shí)現(xiàn)的，其實(shí)我們也可以用jquery來實(shí)現(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://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 文件
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
轉(zhuǎn)自：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn