问题1描述:我写了一个登录界面,在很多地方都需要用到这个登录页面,所以我把这部分的代码以及CSS文件,以及JS文件都保存下来了。那么其他页面需要引用这个页面该怎么引用?
解决:
1.可以用<include>标签把页面引入进来,让登录页面的position=fixed。需要时弹出这个页面就好了。
2.用iframe标签引用。
如果采用方案1解决,会产生一个新的问题。不同页面的命名,以及CSS的控制可能会相互影响,导致最后的布局跟想象的不太一样。如果CSS影响比较小倒是可以手动控制一下,但是需要变的地方实在太多了,如果改了也不太符合我想重用的原则。所以,这里我选择方案2.
问题2描述:我选择方案2,方案2有一个Form表单需要提交,提交之后结果只是Iframe这个页面跳转了,主页还是没变。下面写我走的一些弯路。
解决:
1.在主页用addEventListener监听Iframe的登录按钮点击,如果点击了就跳转。
2.点击按钮之后,在Iframe里面用postMessage给主页发送消息
3.将Form表单的target属性改为_top(正解)
使用方案1,可以监听到,并且执行事件,唯独监听到之后跳转不能实现。似乎有了Iframe标签之后就不能跳转到其他页面了。可能我用跳转函数不对。我用的是window.location();方案2实现结果同方案1。最后选择方案3。
问题3:将DIV放在浏览器正中间
var oBox = document.getElementById('loginDiv');
var L1 = oBox.offsetWidth; //获取元素自身的宽度
var H1 = oBox.offsetHeight; //获取元素自身的高度
var Left = (document.body.clientWidth-L1)/2; //获取实际页面的left值。(页面宽度减去元素自身宽度/2)
var Top = (document.body.clientHeight-H1)/2; //获取实际页面的top值。(页面宽度减去元素自身高度/2)
Left+=document.body.scrollLeft;
Top+=document.body.scrollTop;
oBox.style.left = Left+'px';
oBox.style.top = Top+'px';
-------------------------------------------------分割线---------------------------------------------------------
如果以后在遇到这样的问题
比如:子窗口点击frame需要隐藏父窗口的遮罩层。就需要取父窗口的元素。
parent.document.getElementById("").style.display="none";