javascript下动态创建IMG时IE6两次请求指定资源

2011年8月19日 没有评论

众所周知js可以通过document.createElement方法创建DOM对象,并可以把增加到页面上,今天碰到一个怪异的事情,使用如下代码动态创建一个Img

function req() {
	var el = document.createElement('IMG');
	el.src = '资源的WEB地址';                 //line 3
	document.body.appendChild(el);          //line 4
}

在某种特定的调用req方法时,发现在IE6会有两次请求“资源的WEB地址”,其他浏览器都是正常,真是万恶的IE6啊。由于req方法是另一个函数调用的,以后是多次触发了req方法,经过多方的debug,发生确实只调用了一次req,所以产生问题的原因就是在req方法的内部,对于这么简单的代码,唯一可以修改的地方把第3、4行代码换一下位置,调整后,发现IE6正常了,只请求一次了,测试其他浏览器也是正常,唉,再次BS一下IE6。

 

分类: web前端 标签: , ,

iframe中的swf无法调用页面中的js函数

2011年8月19日 没有评论

主页面中存在一个iframe,目的是让iframe在后台处理一些事情,所以把iframe的width,height设置为1个像素,同时设置visibility为hidden,iframe指向的页面中嵌套了一个swf,该swf是flash、as3,as3脚本中是读取flash的SharedObjects中存放的值,并把该值传回给页面的js函数。直接访问这个iframe的页面能够正常工作,即flash能调用到页面上的js函数,但是访问主页面时,FF、safari、chrome也是正常工作,IE6、8就歇菜了,没有反应,经过一番的查找问题,发现根源是iframe不能是隐藏的,即把visibility设置为visible或者去掉visibility的设置就可以了。

分类: web前端 标签: , , , , ,

兼容各个浏览器的右下角提示框代码

2011年8月12日 没有评论

现在很多网站都喜欢在右下角出现一个信息提示框,当然有些广告也这么做,不管页面怎么滚动,提示框的位置始终位于右下角,查看效果,对于非IE6的浏览器,问题很简单,只要在css中设置position为fixed即可,但IE6不支持fixed属性。解决这个问题的方法大部分使用javascript来做,监听页面滚动的事件,然后实时计算出提示框的top值并把此值赋给提示框。本文要讲的是js的另一种用法,直接在css中通过eval来执行js,具体参看下面示例代码。另外同时用到了css hack技术,在css的属性前加符号“_”话,只有IE6才能识别并应该。注意 css 中 *html的代码解决滚动时候提示框闪动的问题。

本人认为此文最大的价值是明白了javascript代码也能隐藏在css中执行,不得不说脚本真是太强大~~~

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
    #top{
        border:1px solid blue;
		background:#ccc;
        width:200px;
		height:150px;
        position:fixed;
        _position:absolute;
        bottom:0;
        right:0;
		_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
    }

    *html{
        background-image:url(about:blank);
        background-attachment:fixed;
    }
</style>
</head>
<body >
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="top">
	测试效果
</div>
</body>
</html>

本人参考借鉴 http://loo2k.com/ie6-position-fixed/ 中的知识

分类: web前端 标签: , , ,

无觅相关文章插件,快速提升流量