所有BLOG

上一個BLOG |

下一個BLOG |

全部

活动站小型项目总结
2008-12-08 1:46PM / 標準BLOG / 會員可以看

今天早上7点，终于把这个会展活动的站点给完成了，历时42小时，像战斗一样，N个难题，其中一个还花费了我3个多小时，最后还用了一个不是怎么好的，没有办法中的办法来解决。。。所以我决定要将它写出来，如果哪位高手看到的话希望能给小弟一点提示，让小弟以后能够把这个问题解决得更好。

事情起因经过结果：

使用的Iframe框架
main.html 是content.html父级页面，由导航页控制流向，而content.html是另外的几个页面（称为A.html,B.html,C.html）的父级页面，mian页面中添加了自动控制IFRAME高度JS脚本，用的是ONLOAD事件来加载，同样的，content页面中的IFRAME也是加载了同样的脚本来控制高度，问题就是出现在这里，点击了CONTENT页面中控制IFRAME流向的连接了以后页面超过了原来MAIN页面框架的长度的时候，content页面的内容就不能被完整的显示了，这是一个关于动态调整最高父级框架的问题，我没有办法实现，然后我用了刷新页面的方法来解决，先是用了子子页面 --〉子页面 --〉父页面的循序来实现在子子页面加载的时候刷新最高父级页面，结果因为使用的ONLOAD事件，从而导致了多次死循环的发生，这是预想中的结果，因为在刷新了最高父级页面的时候也就是子页面也会重新加载，那么子子页面也会重新加载，事件就会再一次被触发，后来抽了根烟以后，想了一下，只要是在有需要的时候触发，而且在重新加载不会触发就能够实现了，于是我就换到用CONTENT页面上的超连接来触发，也就是ONCLICK事件，但是超连接用ONCLICK 事件刷新的话基本上是和页面跳转同步进行的。。。也就是每次点击其他连接都会回到默认页面，于是我又想了一下。。。如果不是超连接，但是能实现跳转不就可以了么？于是，我就用JS实现了跳转，并且在跳转以后马上调用了刷新父级页面的方法，终于成功了。。。效果出来了。。。但是很快又发现了一个问题，点击连接，有时候不会跳转，我检查了JS里的代码，基本上没有问题的。。。而且也不是每次都不会跳转，跳转失效的频率每次也都是不一样的，想了一下，不知道是不是速度的问题，也就是当点击了超连以后，页面跳转需要下载文件，但是JS的跳转方法并不是等到跳转成功了以后才执行下一行的。。于是我尝试一下加了延迟，设置了300毫秒的延迟执行后，，，连接跳转失效的次数明显的减少了。就这样，我就把这个问题FIX了。。。但是还是觉得用延迟并不是一个好的方法，所以希望有看到这篇文章的朋友，如果您有更好，更直接的方法请您给我说一下，也希望能够多多交流，小米在此向各位朋友先说声谢谢啦。。。

哦。。。顺便一提。。我用的跳转方法是：document.execCommand('Refresh')

我试了N个刷新的方法。。。就只有这个方法，在刷新后是会保留着当前子子框架的页面流向的。。其他的跳转都会恢复为默认页面。

最新消息：

已经找到动态改变IFRAME框架的方法了，详细一点说就是能动态修改页面元素属性的方法：

利用js的setAttribute()方法为标签的属性设置值。

下面的内容翻译自W3C DOM Level 1中关于setAttribute方法的说明.

具体的方法参数如下：

--------------------------------------------------------------------------------

object.setAttribute(sName, vValue [, iFlags])
参数:

sName 必填项. String类型，属性名

vValue 必填项. 为属性指定的变量，可以为string, number, 或者 Boolean类型
iFlags 选填. 下面指定的两种 Integer 类型的标志 0 覆盖同名属性.
1 默认值. 为属性添加指定的值.

返回值

无返回值.

备注

如果指定的属性不存在,该方法讲为object添加新属性及值.

注意,当拼写属性名时. 如果 iFlags 设置成 1 并且指定的sName 参数在该属性上没有相同名字时(包括大小写), object讲为之创建新属性.

如果object有两个或多个相同的属性名, 仅在值上不同时, iFlags设为 0, 该方法仅保存第一个被创建属性的值,其她的同名属性将被忽略.

使用该方法设置 CLASS 属性时, 请将sName 设为 "className",以符合Dynamic HTML (DHTML) 特性.(其实"className"仅适合在IE下使用,FF下要用"class")

该方法可以应用于以下标签:

A, ADDRESS, APPLET, AREA, B, BASE, BASEFONT, BGSOUND, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, COMMENT, currentStyle, CUSTOM, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT,

文章出处：http://www.diybl.com/course/1_web/javascrīpt/jsjs/2007111/81613.html

经过试验已经成功达到无刷新修改元素属性了，但是在这次项目中我舍弃了双层框架的方法了，因为不够时间去研究跨域获取子页面的高度和宽度属性的问题了，难点是在于，页面IFRAME的子iframe 里的内容获取不准确，会受到网络延迟的影响，目前还没有解决方法。

顺便在这里共享一下几个排版常用的要点

DIV层的水平绝对居中：

CSS文件中加入：

body{TEXT-ALIGN: center;MARGIN: 0px;}

#center{MARGIN-RIGHT: auto; MARGIN-LEFT: auto;} /* center是所要居中的DIV的ID*/

浮动对联广告（可作修改成单边使用）：

CSS代码为：
.r1{width:80px;height:80px;background:red;float:right;
position:fixed !important; top/**/:200px;
position:absolute; z-index:300; top:expression(offsetParent.scrollTop+200);right:20px;}
.r2{width:80px;height:80px;background:red;float:right;
position:fixed !important; top/**/:300px;
position:absolute; z-index:400; top:expression(offsetParent.scrollTop+300);right:20px;}
.l1{width:80px;height:80px;background:red;float:right;
position:fixed !important; top/**/:200px;
position:absolute; z-index:300; top:expression(offsetParent.scrollTop+200);left:20px;}
.l2{width:80px;height:80px;background:red;float:right;
position:fixed !important; top/**/:300px;
position:absolute; z-index:400; top:expression(offsetParent.scrollTop+300);left:20px;}

页面代码为：

还有就是
JS做的超连接效果和功能的实现：

/*这段是效果代码*/
function change(change_id,outorover) //change_id :所要显示效果的元素的ID ；outorover:就是触发事件的区别参数（主要使用onmouseover和onmouseout来触发）
{
if(outorover=="over")
{
document.getElementById(change_id).style.textDecoration = "underline";
document.getElementById(change_id).style.cursor = "hand";
}
else if(outorover=="out")
{
document.getElementById(change_id).style.textDecoration = "none";
document.getElementById(change_id).style.cursor = "default";
}
}

/*这里是跳转代码，实现超连接功能的*/

function iframecontrol(value)
{
document.frames['frame_id'].location.href=value;
}

暂时就这么多啦。。。实在没想起来还能分享什么了，想到我再写上来和大家交流。
阅读全文
类别：心情日记查看评论