zoukankan      html  css  js  c++  java
  • 关于JS错误:“行1,字符1”

    关于JS错误:“行1,字符1” - jopwu - 相信自己,一切都会好的

     

     

    做程序开发的最怕碰到什么,我估计无法调试的错误会名列前几位。而Javascript又是一种松散语法的语言,出现这种错误的可能性会大大的增加,这不,我就遇到了万恶的这种错误。

    错误提示位置为行1,字符1。显然这种错误不是由于语法错误导致的。老方法,先去网上搜索可能的原因,结果搜来搜去也没有找到好的解释,只有一篇文章中列举了可能的原因:


    做web开发的同事可能经常会遇到一种js错误,提示“行1,字符1”,这种错误是无法调试的,也无法跟踪到出错的具体代码。这个问题也困扰了很多人。 再做过大量的测试后,我们发现引起这个错误的根本原因还是网页中包含了一个不存在的js文件,本来网页中引用不存在的js文件是允许的,但是IE浏览器就会报js错误,再firefox和世界之窗等浏览器上都不会报错。而且有些机器的ie浏览器也不会报错,初步怀疑是某些插件引起的。

    继续跟踪发现,当webserver发现一个不存在的js文件时,会返回一个包含html代码的页面,浏览器把这个页面当作js代码来执行,就爆出了“行2,字符1”错误。

    解决办法是修改webserver,遇到text/javascript类型时,如果找不到源文件,就返回一个空页面,不包含任何html代码。


    然而这对于解决我当前的问题没有任何用处,因为我页面中并没有引用到不存在的js文件。

    经过无数痛苦的判断,结果找到了问题的原因,现在分享给大家,以便大家在遇到类似的问题时少走弯路。

    在我页面引用的css文件中有这么一条定义:

    expression(Math.max(document.body.scrollWidth,document.getElementById("div_body").scrollWidth));

    正是由于这条语句才导致了行1字符1的错误。我分析原因可能是因为在加载css文件完成后页面还没有加载完成,这导致document的结构还没有被创建,导致document.body无法引用到,由此导致了这个错误。以下是关于css中expression的用法的一些说明:


    CSS中的行为——expression

    最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少。下面是摘自互联网上的文字和例子,因为都被转烂了,没法注明出处。

    IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

    给元素固有属性赋值

    下面是定义container容器的宽度,如果<725就为自己的宽度,否则就等于725,相当于max-725px;。

    <style type="text/css" media="screen">
    #container { expression((documentElement.clientWidth < 725) ? "725px" : "auto" ); }
    </style>

    给元素自定义属性赋值

    例如,消除页面上的链接虚线框。 通常的做法是:

    <a href="link1.htm" onfocus="this.blur()">link1</a>
    <a href="link2.htm" onfocus="this.blur()">link2</a>
    <a href="link3.htm" onfocus="this.blur()">link3</a>

    粗看或许还体现不出采用expression的优势,但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,何况两者一比较,哪个产生的冗余代码更多呢?

    采用expression的做法如下:

    <style type="text/css">
    a {star : expression(onfocus=this.blur);}
    </style>
    <a href="link1.htm">link1</a>
    <a href="link2.htm">link2</a>
    <a href="link3.htm">link3</a>

    说明:里面的star就是自己任意定义的属性,你可以随自己喜好另外定义,接着包含在expression()里的语句就是JS脚本,在自定义属性与expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非script内。OK,这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意,如果触发的特效是CSS的属性变化,那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改,你可能想当然的会认为应该写为

    <style type="text/css">
    input {star : expression(onmouseover=this.style.backgroundColor="#F5F5F5";
    onmouseout=this.style.backgroundColor="#FFFFFF")}
    </style>
    <input type="text">
    <input type="text">
    <input type="text">

    可结果却是出现脚本出错,正确的写法应该把CSS样式的定义写进函数内,如下所示:

    <style type="text/css">
    input {star : expression(onmouseover=function()
    {this.style.backgroundColor="#FF0000"},
    onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
    </style>
    <input type="text">
    <input type="text">
    <input type="text">

    注意:不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高。


    总结:

    出现“行1,字符1”的错误时可以在一下几个方面找原因:

    1. 可能与IE的某些插件冲突。请把所有无关的IE加载项全部禁用后尝试

    2. 引用了不存在的js文件

    3. 页面的某些文件在文档模型还没建立时就已经开始引用相关的节点

    4.页面上调用两个相同的ID

    我的一个页面中使用验证码,远程的登陆需要验证码,本地回复也需要验证码
         <input type="text" name="txtLoginYZM" id="txtLoginYZM" maxlength="4" style="80px;border:1px solid #E2DFDF"/>
                 <img src="/common/validation.aspx" id="repYzm"  width="100" height="40"/> <span class="font12">看不清?<a href="javascript:void()" onclick="$('#repYzm').attr('src','/common/validation.aspx?rand='+Math.random())" class="color5">换一张</a></span>

  • 相关阅读:
    Educational Codeforces Round 88 (Rated for Div. 2) D. Yet Another Yet Another Task(枚举/最大连续子序列)
    Educational Codeforces Round 88 (Rated for Div. 2) A. Berland Poker(数学)
    Educational Codeforces Round 88 (Rated for Div. 2) E. Modular Stability(数论)
    Educational Codeforces Round 88 (Rated for Div. 2) C. Mixing Water(数学/二分)
    Codeforces Round #644 (Div. 3)
    Educational Codeforces Round 76 (Rated for Div. 2)
    Educational Codeforces Round 77 (Rated for Div. 2)
    Educational Codeforces Round 87 (Rated for Div. 2)
    AtCoder Beginner Contest 168
    Codeforces Round #643 (Div. 2)
  • 原文地址:https://www.cnblogs.com/fogwang/p/2666586.html
Copyright © 2011-2022 走看看