百度空间 | 百度首页 
 
查看文章
 
活动站小型项目总结
2008年12月08日 星期一 13:19

今天早上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/javascript/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;}

页面代码为:
<div class="r1"><a href="这里改为你要跳转到的连接地址" target='_about'><img src="/js/pic/piao-l-1.gif" width="80" height="80" border="0" /></a></div>
<div class="r2"><a href="这里改为你要跳转到的连接地址" target='_about'><img src="/js/pic/piao-l-1.gif" width="80" height="80" border="0" /></a></div>
<div class="l1"><a href="这里改为你要跳转到的连接地址" target='_about'><img src="/js/pic/piao-l-1.gif" width="80" height="80" border="0" /></a></div>
<div class="l2"><a href="这里改为你要跳转到的连接地址" target='_about'><img src="/js/pic/piao-l-1.gif" width="80" height="80" border="0" /></a></div>

还有就是
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;
}

暂时就这么多啦。。。实在没想起来还能分享什么了,想到我再写上来和大家交流。


类别:心情日记 | | 添加到搜藏 | 分享到i贴吧 | 浏览() | 评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2010 Baidu