iT邦幫忙

1

請問網站效果?

http://librarywork.taiwanschoolnet.org/cyberfair2020/shiningstar/index.htm

請問網站頁面中,點選"查看更多"的按鈕之後,
看到跳出的視窗。

查看網頁原始碼,在網頁最後有看到,這是使用iframe。

但是,點選""查看更多"的按鈕之後",要如何讓iframe可以作用呢?

謝謝您!
https://ithelp.ithome.com.tw/upload/images/20200507/20058503JFNPPzKJ8r.png

https://ithelp.ithome.com.tw/upload/images/20200507/200585035dGczJ0Qqw.png

看更多先前的討論...收起先前的討論...
kekeke iT邦新手 5 級 ‧ 2020-05-07 17:45:56 檢舉
用bootstrap modal 應該可以達到你要的效果~
myubuntu iT邦新手 5 級 ‧ 2020-05-07 17:55:08 檢舉
這格網站不是使用modal
Homura iT邦高手 1 級 ‧ 2020-05-07 18:38:05 檢舉
更換iframe的src就行了
myubuntu iT邦新手 5 級 ‧ 2020-05-07 18:54:29 檢舉
請問您細節

應該如何更換iframe的src
player iT邦大師 1 級 ‧ 2020-05-07 21:47:09 檢舉
你給的範例沒有更換iframe的src
3
player
iT邦大師 1 級 ‧ 2020-05-07 21:46:42
最佳解答

它是用

<div href="a" class="btn btn-primary atn1">查看更多</div>

對上後面的

<div class="awri1">
<div class="wri1">
<div class="no"><img src="img/close.png" alt=""></div>
<iframe src="iframe1/a.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>

<script src="js/index.js"></script>

載入設定按下觸發事件 (使用jQuery)

$(".atn"+i).click(function(){
	$(".awri"+i).fadeIn();
});

關閉的按鈕是這個

$(".no").click(function(){
	 $(".awri"+i+",.bwri"+i+",.cwri"+i+",.dwri"+i+",.ewri"+i+",.fwri"+i+",.gwri"+i).fadeOut();
});

這樣解說夠清楚了吧?

設iframe的src的做法
優點是相關的code與html可以減少到只留1份, 用戶端瀏覽器可以稍微省點記憶體
缺點是切換src時會需要載入的時間

你給的範例
是變成一堆iframe都在讀網頁時預先載入, 缺點是會多消耗點記憶體
優點是按下【查看更多】時不用再等網頁載入

myubuntu iT邦新手 5 級 ‧ 2020-05-08 12:46:32 檢舉

哇!真是感謝您

0
Homura
iT邦高手 1 級 ‧ 2020-05-07 19:25:36

在查看更多時點擊時觸發跳窗
並修改iframe的src屬性就好
假設你iframe的ID叫ifID

var ifObj = document.getElementById('ifId');
ifObj.src = '你要的URL';
myubuntu iT邦新手 5 級 ‧ 2020-05-08 12:45:57 檢舉

感謝你

0
摳宇
iT邦新手 5 級 ‧ 2020-07-28 11:19:35

不理解這為何不用
Bootstarp modal彈跳視窗再內容iframe

我要發表回答

立即登入回答