不像弹出窗的弹出窗，为了保存加载新页面后退

经常的，我们界面上的查询框、ajax方式加载的列表等界面， 在跳转某个页面再返回时，界面已经不是最终操作的效果 （查询输入条件没了，最明显的是用了select2插件的select，列表原来的第五页变成又回到第一页）

用了弹出窗modal的方式，可是显示出来，整个页面效果跟UI设计已经不是一个格调了。

总想耍点小聪明，做个不像弹出窗的弹窗吧。。。

1.依赖jquery.js

2.支持模块化方式使用

3.只基于chrome测试过

<script src="//cdn.bootcss.com/jquery/1.12.3/jquery.js"></script> <script src="domtwins.js"></script> 2.选择占位div进行初始化：注意不能用body

var opts = { iframeFit:true, history:false } var domTwins = $(".sec1").DomTwins(opts);

或

var domTwins = new DomTwins($(".sec1"),opts);

参数表示 iframeFit:当使用iframe加载显示页面时，iframe是否自适应子页面高度。默认值为true history:是否支持后退前进操作，支持H5才有效，并且页面中只有一个DomTwins对象能生效。建议只有在切换整屏页面的时候才使用。默认值为false

###3.打开加载新的url

domTwins.open( "child.html", function(dt,closeParams){ console.info("onclose",dt,closeParams); } ); 4.关闭 iframe子页面child.html中自关闭

DomTwins.closeThis(oncloseParams)；

注：child.html需要引入domtwins.js,若不引入也可以使用

parent.postMessage({ type:"close",data:oncloseParams },"*"); iframe子页面child.html中自关闭(废弃，只支持同域)

parent.DomTwins.parentClose(window,oncloseParams)；

注：其中的入参为child.html下的window或者dom均可，建议使用window

domTwins.close(closeParams)；

closeParams可以是任意值，最终传递给onclose回调

<div class="sec2" dom-twins-id="sec2"> <div > <input type="button" id="view2" value="查看" dom-twins-target="sec2" dom-twins-onclose="onclose" dom-twins-href="child.html"> </div> </div>

定义onclose函数（全局的 (/ □ )，你肯定会开骂...

function onclose(dt,oncloseParams){ console.info("onclose",dt,oncloseParams); }

好吧，开个onclose函数注册的，开心点，想怎么做都行

DomTwins.registerCloseMethod("onclose", function(dt,oncloseParams){ console.info("myCloseMethod",dt,oncloseParams); } ); 3.引入js

<script src="//cdn.bootcss.com/jquery/1.12.3/jquery.js"></script> <script src="domtwins.js"></script>