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

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

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

如下圖所示：

點擊之前：

單擊之后：

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

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

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

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

（1）給按鈕加上點擊事件：

<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(); // 清空原來的p標(biāo)簽的中內(nèi)容
　　$("p.loadPhoto").html("<iframe width=520 height=400 name=\"touzizuhe\" id=\"touzizuhe\" frameborder=0 src="生成圖片的地址"></iframe>");// 添加iframe的jquery的語句
});

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

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

您可能感興趣的文章:

相關(guān)文章

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