<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>artDialog</title> <script src="../artDialog.source.js?skin=default"></script> <script src="../plugins/iframeTools.source.js"></script> <style> html, body { height:100%; margin:0; padding:0; font-size:14px; font-family:'Microsoft Yahei', Tahoma, Arial!important; font-family:'宋体', Tahoma, Arial; overflow:auto; } a { color: #27d; text-decoration: none; } #doc { widows:100%; height:100%; position:relative; z-index:1; overflow:hidden;} #sideBar { float:left; width:228px; height:100%; border-right:solid 1px #CCC; overflow:auto; } #main { margin-left:230px; height:100%; } #main iframe { width:100%; height:100%; border:none 0; } #main .tips { height:2em; text-indent:2em; line-height:2em; color:#FFF; background:#030; font-weight:bold; } .sideBarWrap { padding:10px; } #sideBar .content { margin:5px; } #sideBar .content p { padding:0; margin:0; padding-bottom:15px; } #sideBar .close { line-height:2em; text-align:center; background:#F4F4F4; border-bottom:1px solid #D8D8D8; color:#333; } #photo { text-align:center; } #photo img { margin-top:15px;} #sideBar .nav { padding:5px; margin:15px 0; border:1px solid #D8D8D8; background:#F4F4F4; } #sideBar .nav a { padding:1px; } #sideBar .nav a:hover { background:#27d; color:#FFF; text-decoration:none; } #sideBar .btns { padding-bottom:15px; text-align:center; } .gotop { position:absolute; right:17px; bottom:60px; z-index:9; } </style> </head> <body> <div id="doc"> <div id="sideBar"> <div class="close"><a href="plugin.iframe.html" target="_blank">关闭框架查看</a></div> <div class="sideBarWrap"> <div id="photo"></div> <div class="nav"><a href="plugin.iframe.html#top" target="iframe">top</a> <a href="plugin.iframe.html#opener" target="iframe">opener</a> <a href="plugin.iframe.html#open" target="iframe">open</a> <a href="plugin.iframe.html#data" target="iframe">data</a> <a href="plugin.iframe.html#load" target="iframe">load</a> <a href="plugin.iframe.html#alert" target="iframe">alert</a> <a href="plugin.iframe.html#confirm" target="iframe">confirm</a> <a href="plugin.iframe.html#prompt" target="iframe">prompt</a> <a href="plugin.iframe.html#tips" target="iframe">tips</a></div> <div class="btns"> <button id="open">iframe弹出</button> <button id="move">移动</button> <button id="close">关闭</button> </div> <div class="content"> <p> 当前页面右侧是iframe套嵌的页面。对话框可以自由穿越框架进行展示,开发者几乎无需考虑层级关系即可进行跨框架操作DOM。</p> <p>artDialog如果要支持框架集穿越的话,需要用iframe页面套住框架集:<a href="iframe_frameset.html" target="_blank">见这里</a></p> </div> <input disabled id="testInput" title="testInput" type="text" /> </div> </div> <div id="main"> <iframe id="iframe" name="iframe" src="plugin.iframe.html"></iframe> <a class="gotop" title="返回顶部" href="plugin.iframe.html#header" target="iframe">{top}</a> </div> <script type="text/javascript"> var test, iframe = document.getElementById('iframe'); document.getElementById('open').onclick = function(){ var iframeWindow = iframe.contentWindow; test = iframeWindow.art.dialog({ lock: true, content: '人品极度不稳定的时刻到了!' }); } document.getElementById('move').onclick = function(){ test && test.position('50%', '5%'); } document.getElementById('close').onclick = function(){ test && test.close(); test = null; } var _hash = window.location.hash if (_hash) { _hash = _hash.split('#')[1]; if (_hash) iframe.src = 'plugin.iframe.html#' + _hash; }; </script> </div> </body> </html>