HTML 代碼結構如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <ul> <li><a href="http://www.w3school.com.cn/tags/tag_iframe.asp" target="iframe_a">w3c school</a></li> <li><a href="https://www.baidu.com/index.php?tn=monline_3_dg" target="iframe_a">百度</a></li> <li><a href="https://www.cnblogs.com/" target="iframe_a">博客園</a></li> <li><a href="http://www.ximalaya.com/explore/" target="iframe_a">喜馬拉雅</a></li> <li><a href="https://jx.tmall.com/?ali_trackid=2:mm_28347190_2425761_27186547:1503727807_3k9_233309614" target="iframe_a">天貓</a></li> <li><a href="http://www.ctrip.com/?allianceid=1381&sid=1068414" target="iframe_a">攜程</a></li> </ul> </div> <iframe src="bbb.html" name="iframe_a" frameborder="1" width="600" height="400"> <div>你盛開的積分快結束了寬度盛開的積分舒服的水電費聖誕節覅</div> </iframe> </body> </html>
打開上面 HTML 結構的頁面，iframe 打開的是默認頁面 （bbb.html），這個頁面個人可自己搭建，然后點擊左側列表（沒有加樣式，列表實際是在上面），iframe 標簽內是對應的頁面，即可實現點擊左側列表，實現右側出現對應頁面的內容；其中 iframe 標簽的 name 屬性和 a 標簽的 target 屬性一定要對應的