这几天写html前台页面的总结

问题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';

-------------------------------------------------分割线---------------------------------------------------------

如果以后在遇到这样的问题

一，Form表单target的4个属性解释

二，JS语句父子窗口互相取元素的方法

比如：子窗口点击frame需要隐藏父窗口的遮罩层。就需要取父窗口的元素。

parent.document.getElementById("").style.display="none";

三，postmessage的用法

四，JS 中各窗口的嵌套怎么引用到不同的窗口