jQuery中iframe的操作(點(diǎn)擊按鈕新增窗口)

更新時(shí)間：2016年04月20日 17:13:02 作者：山一程

今天遇到一個(gè)問題：怎樣實(shí)現(xiàn)點(diǎn)擊一個(gè)按鈕，在當(dāng)前的頁(yè)面上新增加一個(gè)小窗口，展示一個(gè)圖片信息？

如下圖所示：

點(diǎn)擊之前：

單擊之后：

分析：要使新增的小窗口不影響父頁(yè)面，我們這里采用iframe的框架的技術(shù)。

【<iframe>也應(yīng)該是框架的一種形式，它與<frame>不同的是，iframe可以嵌在網(wǎng)頁(yè)中的任意部分。】

實(shí)現(xiàn)是思路：（1）在按鈕的上添加一個(gè)點(diǎn)擊的事件，在點(diǎn)擊后加入一個(gè)iframe窗口，并將生成圖片的地址加上去即可。

具體實(shí)現(xiàn)的代碼：

（1）給按鈕加上點(diǎn)擊事件：

<input type="radio" name="dynamicType" id="dianji" style="padding: 0 10px 0 5px;margin-left:10px;margin-top: 13px;"/>
<p class="loadPhoto"></p>
$("#dianji").click(function(){
　　$("p.loadPhoto").empty(); // 清空原來(lái)的p標(biāo)簽的中內(nèi)容
　　$("p.loadPhoto").html("<iframe width=520 height=400 name=\"touzizuhe\" id=\"touzizuhe\" frameborder=0 src="生成圖片的地址"></iframe>");// 添加iframe的jquery的語(yǔ)句
});

注意：這里iframe的開發(fā)之后，會(huì)自動(dòng)的去訪問生成圖片的地址，這樣圖片的生成的需求就滿足了。

有關(guān)jQuery中iframe的操作(點(diǎn)擊按鈕新增窗口)就給大家介紹這么多，希望對(duì)大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖
這篇文章主要介紹了jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖的核心代碼，有需要的小伙伴可以參考下
2015-04-04
jquery實(shí)現(xiàn)點(diǎn)擊瀏覽器返回上一頁(yè)按鈕并能直接刷新
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊瀏覽器返回上一頁(yè)按鈕并能直接刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
jQuery操作attr、prop、val()/text()/html()、class屬性
這篇文章主要介紹了jQuery操作attr、prop、val()/text()/html()、class屬性，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
基于jQuery實(shí)現(xiàn)拖拽圖標(biāo)到回收站并刪除功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)拖拽圖標(biāo)到回收站并刪除功能，實(shí)現(xiàn)非常簡(jiǎn)單，我們直接可以利用jQuery內(nèi)部封裝的拖拽接口即可簡(jiǎn)單實(shí)現(xiàn)在網(wǎng)頁(yè)上拖拽任意元素的功能，感興趣的小伙伴們可以參考一下
2015-11-11
使用jquery讀取html5 localstorage的值的方法
在HTML 5中，localstorage是個(gè)不錯(cuò)的東西，在支持localstorage的瀏覽器中，能持久化用戶表單的輸入，即使關(guān)掉瀏覽器，下次重新打開瀏覽器訪問，也能讀出其值,很不錯(cuò)的一個(gè)東西，接下來(lái)實(shí)例介紹，需要的朋友可以參考下
2013-01-01
jQuery對(duì)象與DOM對(duì)象之間的相互轉(zhuǎn)換
本文主要給大家介紹的是jQuery對(duì)象與DOM對(duì)象之間的相互轉(zhuǎn)換的方法和示例，非常實(shí)用，這里推薦給有需要的小伙伴參考下。
2015-03-03
jQuery的remove()方法使用詳解
從DOM中刪除所有匹配的元素。這個(gè)方法不會(huì)把匹配的元素從jQuery對(duì)象中刪除，因而可以在將來(lái)再使用這些匹配的元素。但除了這個(gè)元素本身得以保留之外，其他的比如綁定的事件，附加的數(shù)據(jù)等都會(huì)被移除。我的理解就是將元素移除了。
2015-08-08
深入理解$.each和$(selector).each
下面小編就為大家?guī)?lái)一篇深入理解$.each和$(selector).each。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-05-05
[jQuery] 事件和動(dòng)畫詳解
這篇文章主要介紹了JQ事件和動(dòng)畫，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2019-03-03
jquery 頁(yè)眉單行信息滾動(dòng)顯示實(shí)現(xiàn)思路及代碼
將滾動(dòng)的內(nèi)容查詢出來(lái)，放在一個(gè)div 或者別的容器里面，具體的實(shí)現(xiàn)代碼如下
2014-06-06