• MOSS2007图片库的幻灯片视图在IE8标准渲染模式下的bug及其修正


    重现条件:
    MOSS 2007(其它版本没有测试)
    自定义模板页声明使用了xhtml1-transitional.dtd或者更严格的文档类型
    IE8标准渲染模式
    以幻灯片视图查看图片库

    满足以上条件时会发生JS错误,不能通过点击缩略图切换浏览图片,而在IE6、IE7、IE8的其它模式下都没有问题。

    IE给出的提示是

    网页错误详细信息

    用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; WebSaver; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.4; OfficeLivePatch.1.3; MS-RTC LM 8)
    时间戳: Thu, 3 Sep 2009 01:09:11 UTC


    消息: 缺少对象
    行: 1554
    字符: 3
    代码: 0
    URI: http://portal.*****.com/_layouts/2052/imglib.js

    错误原因:
    在imglib.js中,function ClickFrame(frame)里有这么一句
    var imgCur=document.getElementById('CurrentPic');
    用“右键,查看源代码”的方式在源代码里找不到字符串"CurrentPic",但是在IE8的开发人员工具里可以找到一个name为<img>标记,猜测这个img是通过js创建,然后附加到DOM的。
    问题就在这里,这个<img>标记只有name="CurrentPic",没有id属性。而IE8标准渲染模式下,如果发现文档声明使用了xhtml1-transitional.dtd或者更严格的文档类型,document.getElementById(sName)是取不到只指定了name="sName",没有指定id="sName"的元素的。比如下面这个例子

    此时点击图片会alert出null,如果把第一行的文档类型去掉,或者使用IE8的非标准渲染模式或IE6、IE7,都会alert出[object HTMLImageElement]。

    显然,MOSS的开发人员在这忘了给这个<img>标记加上id属性,我觉得简单的解决办法是通过js给这个<img>标记加上id属性即可。

    我的做法是先准备一个小函数

    FixIdBug
    function FixIdBug(objName) {
        
    var objs = document.getElementsByName(objName);
        
    if (objs != null) {
            
    for(var i = 0; i < objs.length; i++) {
                
    if (objs[i].id == "") objs[i].id = objs[i].name;
            }
        }
    }

    然后在页面中调用

    代码
    var target = new Object();
    target.FixIdBug 
    = function(){FixIdBug("CurrentPic")};
    if (window.addEventListener)
        window.addEventListener(
    "load", target.FixIdBug, false);
    else
        window.attachEvent(
    "onload", target.FixIdBug);

    后记:这本来是将近一年前发现的一个小问题,当时就打算记到博客上的,后来一忙就忘了。今天整理资料时发现了,就存下来备忘吧

  • 相关阅读:
    JAVA-类加载机制(2)-类加载的过程
    JAVA-类加载机制(1)-生命周期
    StarUML-详解
    JMS-mq-发布/订阅
    JMS-mq-点对点
    Spring-Transcation
    Session-Hibernate
    Session
    Git配置
    Maven配置
  • 原文地址:https://www.cnblogs.com/key/p/1781213.html
Copyright © 2020-2023  润新知