JavaScript

IE 隐私报告 cookie

0
3 months ago
by leakon in

今天开发一个浏览器 bookmarklet 的应用，加载一些 Javascript。

在 Firefox 上测试都很顺利，搬到 IE 上居然不能执行！

点击书签后，仔细观察浏览器的反应，看到状态栏突然出现一个图标，是“隐私报告”，打开后，提示我要访问的网站有第三方 cookie，已被阻止。

我就很奇怪了，另一个 bookmarklet 应用是同一套流程开发的，怎么没出现这样的问题？

把两边的代码改成一样的，结果还是不行！

把浏览器的设置全部重置一遍，依然不行。

我已经要抓狂了！

最后，我抱着试试看的想法，把书签的 url 路径改了一下，在测试，居然成功了！

后来分析，是因为 url 中包含一个单词 “collect”！

原来 IE 发现你的 script 的 src 是第三方域名，并且路径包含 collect，就会自动阻止访问！

IE 真是满身坑啊！

 

——–

2012-2-24 更新

之前的理解有误，不是单词的问题。资源不能加载成功的原因是 javascript 代码不严谨，定义数组的最后一个元素以逗号 “,” 结尾了。在 Firefox 下没问题，在 IE 下会失败。

关于隐私错误，我进一步的理解是：请求跨域的 script 资源，浏览器会把第三方域名的 cookie 附带在请求中一起发出去。IE 会对部分 cookie 做限制。

如果第三方希望通过 cookie 获取用户状态，在 IE 设置了高级别的隐私政策后，有可能失效。

Iframe Tips ABC

2
1 year ago
by leakon in

通常我们用 js 脚本创建 iframe 时，会这样写：

var iframe = document.createElement('iframe');

之后我们可能会定义 id、name、border 等属性，这些看似简单，其实 IE 与非 IE 浏览器之间、IE 和 IE 高版本之间的迥异，使得 iframe 的相关兼容性操作非常地有文章。

牛A：frameborder

现象：使用 (iframe.frameBorder = 数值) 或(iframe.setAttribute(‘frameborder’,数值)) 在 IE 浏览器下无效
原因：IE 浏览器区分属性名称大小写
解决方法：iframe.setAttribute(‘frameBorder’,’0′) Or iframe.setAttribute(‘frameborder’,’0′,0)，兼容所有浏览器。

注：经测试，IE8已经修复此问题

牛B：动态将Form target到iframe

背景：假设现在我们要让一个 Form 表单结果提交到一个 HTML 结构中已存在的 iframe，会这样做：

<form id="form" name="form" target="相应iframe的name:iframeNB" method="post" >
</form>
<iframe name="iframeNB" ></iframe>

OK，什么问题也没有，再假设我们需要提交到脚本动态生成的 iframe 中，会这样做：

<form id="form" name="form" target="iframeNB" method="post" >
</form>
<script>
var iframe = document.createElement('iframe');
iframe.name = 'iframeNB';
...
someParent.appendChild(iframe);
</script>

去 IE 浏览器里试试，你会发现 Form 会在新窗口显示提交结果，Why?
原因：
我为此尝试了很久，结果是IE此前版本不能通过(iframe.name=)这种方式给 iframe 设置 name 值，也就是说生成的 iframe 是没有 name 值的，但却可以 alert 出来，这很诡异；当然，这也并不是没有解决办法。
解决方法，为此我们得为 IE 单独写一行代码：

  /*only for ie */ 
    var iframe = document.createElement('<iframe name="iframeNB">'); 

看到这行代码，我们笑了，这是天大的杯具（喜剧？）～～不管IE有多么搓的问题，他总会有自己一套解决之……
而且这行代码会在其他非 IE 浏览器抛出异常，所以我们可以利用这点来做最终版：

    var iframe; 
    try{ 
        iframe = document.createElement('<iframe name="iframeNB">'); 
    }catch(e){ 
        iframe = document.createElement('iframe'); 
    } 
    iframe.name = 'iframeNB'; 
    ... 
    someParent.appendChild(iframe); 
    ... 

[2009-12-9]补充：最佳实践 – YUI 是如何 creat iframe 的

    /** 
    * @description Creates an iframe to be used for form file uploads.  It is remove from the 
    * document upon completion of the upload transaction. 
    * @method createFrame 
    * @private 
    * @static 
    * @param {string} optional qualified path of iframe resource for SSL in IE. 
    * @return {void} 
    */ 
    function _createFrame(secureUri){ 
    // IE does not allow the setting of id and name attributes as object 
    // properties via createElement().  A different iframe creation 
    // pattern is required for IE. 
    var frameId = 'yuiIO' + this._transaction_id,io; 
    if(YAHOO.env.ua.ie){ 
        io = document.createElement('<iframe id="' + frameId + '"name="' + frameId + '" />'); 
        // IE will throw a security exception in an SSL environment if the 
        // iframe source is undefined. 
        if(typeof secureUri == 'boolean'){ 
            io.src = 'javascript:false'; 
        } 
    }else{ 
        io = document.createElement('iframe'); 
        io.id = frameId; 
        io.name = frameId; 
    } 
    io.style.position = 'absolute'; 
    io.style.top = '-1000px'; 
    io.style.left = '-1000px'; 
    document.body.appendChild(io); 
    YAHOO.log('File upload iframe created. Id is:' + frameId, 'info', 'Connection'); 
    } 

这里需要额外注意到的一点是：

// IE will throw a security exception in an SSL environment if the
// iframe source is undefined.
if(typeof secureUri == 'boolean'){
io.src = 'javascript:false';
}

姑且算是牛D吧 =.=!

牛C：iframe.onload

关于 onload 这点大家可以参考怿飞师父的文章：判断 iframe 是否加载完成的完美方法，在此纯引用一次代码：

var iframe = document.createElement("iframe"); 
iframe.src = "http://www.planabc.net"; 
if (iframe.attachEvent) { 
    iframe.attachEvent("onload", function () { 
        alert("Local iframe is now loaded."); 
    }); 
} else { 
    iframe.onload = function () { 
        alert("Local iframe is now loaded."); 
    }; 
} 
document.body.appendChild(iframe); 

需要注意到的是：

  • IE8也不支持iframe.onload
  • Opera两者均可，所以使用此方法会绑定前者
  • 即使我们不预设iframe.src = some urls，也会默认执行一次onload事件，可以通过分析 src 规避。

附测试文件：
1.iframe_ie_ugly.html
2.iframe_fixed.html
以上，我认为 ABC 中最牛的就是 B 了，这也是我标题的亮点=.=! 斯密达们认为呢？

上述文字转自 http://blog.silentash.com/2009/12/iframe-tips-abc/，感谢原作者给我提供的巨大帮助。

转载在这里与更多人分享。

IE Bug Javascript

0
1 year ago
by leakon in

问题描述：
当 A 标签的文本是 http 开头时，设置 href 属性，会同时以相同的值更新链接文本，反之亦然。

解决方法：
在设置 href 时，在开头添加一个空格 ‘ ‘，即可解决此 bug。

测试 Demo:

http://code.leakon.com/javascript/set_href/set_href.html

注意，只在 IE 下会出现错误。

预期的功能是修改链接的 href 属性。

使用默认的修改方法有 bug，会把链接文本改掉！

0×80040111 NS_ERROR_NOT_AVAILABLE

0
1 year ago
by leakon in

Firefox 在处理 Ajax 遇到错误时会报 0×80040111 异常。

在网上查了下，有的说法是，在很短的时间间隔发送了 2 次 Ajax 请求，XMLHttpRequest 的值还没有返回回来就又被请求了一次。

还有一个情况，是我遇到的，在请求成功返回后执行回调函数时，引用了空对象的属性，debug 报错：”null has no properties“。

目前只遇到这 2 种情况，记录备忘。

KB927917 IE 报错 解决方法

0
1 year ago
by leakon in ,

在 body 标签内调用 append 方式给 body 增加一个节点，如果此时 body 未加载完，也就是 body 标签还未关闭，IE 将报错：KB927917。

页面错误提示：Unable to modify the parent container element before the child element is closed.

查了下资料，知道了问题的产生原因：

首先是微软的详细解释：http://support.microsoft.com/kb/927917

最后发现其实微软的MSDN上早已列举了解决办法：

http://blogs.msdn.com/ie/archive/2008/04/23/what-happened-to-operation-aborted.aspx

官方给出的解决办法如下：

  1. Moving your script execution to a function that is invoked after parsing is complete (e.g., onload)
  2. Adding the defer boolean attribute to the script block (this defers execution of the script content until parsing is complete)
  3. Limiting your tree modifications to the script-element’s immediate parent
  4. Moving the location of your script block to a child of the body (this usually solves most problems, while allowing the most flexibility in terms of scenarios).

Object Oriented Javascript PDF ENG

0
2 years ago
by leakon in ,

Object Oriented Javascript

这几天头大，钻研 prototype, prototype chains, scope, scope chains, constructor, closures 。

突然觉得自己根本不懂 Javascript。

把 《Pro Javascript Techniques》 有关 OOP 的部分仔细读了两遍，又看了半天这个链接：

http://www.jibbering.com/faq/faq_notes/closures.html

发现自己根本不懂 English，感觉这文章是用英文文言文写的？

有兄弟用自己的普通话大体翻译了下，写的还挺深入的，比较容易看懂：

http://www.zhuoqun.net/html/y2009/1203.html

各位对照着看吧。

为了进一步搞明白 Javascript 的对象继承机制，以及能设计出模块化的 Javascript Apps 平台，我找到了《Object-Oriented Javascript》这本书的 PDF 版，上面那个大图片是本书的封面。今晚好好研读一下。

我的服务器带宽实在是小，感觉像 1M 共享的，暂时先不提供下载了，给 2 个其他下载地址：

http://rapidshare.com/files/186330594/1847194141.pdf

http://www.itxuexi.com/resource/1291/

如果这 2 个地址失效，给我留言，我 24 小时内上传 PDF 到服务器供您下载。

看书去了……

IE IFrame Transparent 透明

0
2 years ago
by leakon in , , ,

用 Javascript 插入 IFrame 标签，在 Firefox、Chrome 等浏览器上，默认都是透明的，但 IE 有默认的白色背景。

本来，在 html 中写入 IFrame 标签，并加上 allowTransparent=”true” 这样的属性，IE 也一样可以透明，但今天的问题是必须用 Javascript 插入。

用 IE Developer ToolBar 测试，在 IFrame 的 src 页面的 body 样式上加上 backgroud:transparent 可以使 IFrame 透明。

但我们要用 Javascript，本域的 Javascript 脚本是没法设置跨域 IFrame 页面的，况且创建 IFrame 的时候还没设置 src，所以这个办法不行。

只能用个土办法，把 src 设置为一个绝对路径的 html 页面，这个页面你自己可以任意编辑，把 body 的样式设成透明即可。

注意，为了性能，只在 IE 浏览器下设置 src，Firefox 和 Chrome 都不用设置。

在这一点上，IE7 跟 IE6 一样弱，比现代浏览器差远了！

DOCTYPE Javascript documentElement

0
2 years ago
by leakon in

在 Javascript 里面调用一些属性的名称发生了改变，比如得不到 document.body.scrollTop 的值。

使用了 DOCTYPE 之后，滚动条位置必须用 document.documentElement.scrollTop 来调用，类似的还有 scrollLeft 等。

但是，在没有 DOCTYPE 的时候 document.documentElement.scrollTop 也永远为零了。

能否有一个在有或没有 DOCTYPE 定义都可以用的方案呢？

可以这样写：

// 浏览器滚动条位置
function scrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
} else if (window.pageYOffset) {
scrollTop = window.pageYOffset;
}
return scrollTop;
}

Mootools 教程

0
3 years ago
by leakon in

今天发现一个 MooTools 教程，共 30 篇，每天一个，目前为止还没写完。

简单看了看，还挺详细的，有很多例子，还详细说明了好多不为人知的问题。

30-days-of-mootools-12-tutorials-day-1-intro-to-the-library

同时还发现了一个 MooTools 的论坛：

http://www.mooforum.net/

Javascript 获取 textarea 光标 文字 位置 内容 IE Firefox

1
3 years ago
by leakon in , ,

Javascript 获取 textarea 光标 文字 位置 内容 IE Firefox

最近帮朋友做一个获取文字内容，并处理选中文字的Javascript程序。

本来上网查查，用Firefox搞定了，包括Opera、Safari，不过到IE那里遇到很多问题！！！

还发现了IE的一个Bug！

就是
 var objRange  = document.selection.createRange();
 var strRange  = objRange.text;
 objRange.moveEnd(“character”, intLenOfHaystack);

之后，objRange.text会莫名其妙的多出一个空格，实际上，是当前文档，有几个textarea标签，他就会多出几个空格！

真是奇怪的Bug！

唉，碰到IE，搞前端开发的会很头疼！

反复搞了几天，不断尝试新方法，终于找到一个IE的解决方案，就是从下面转载的地方查到的。

发在这里，为了留作备份。

代码放到GoogleCode中了，我自己写的是select_range.html，其他2个文件是测试不同的代码用的。

最后我总结了一个GetStringPosition函数，我基本测试了一下，所有浏览器都可用。欢迎大家测试！

http://leakon.googlecode.com/svn/trunk/leakon/javascript/select_range/

后面就是引用别人的内容了，我是从

http://hi.baidu.com/sihillver/blog/item/35e1c6333552b042ac4b5f6b.html

这里找到的，这个blog也是引用别人的内容，我就不去挨个感谢啦。

感谢所有为互联网创造有价值内容的人！谢谢！

   在网上用baidu找了很久，找到的都是IE的方法，Firefox都不能用。 而且很多要用到<textarea>.focus()方法，用起来很不方便。
后来转用Google，搜了下”textarea cursor”，第一个就有好方法。我根据最后一个家伙的comments，写了一个sample，应该还是挺好用的。
原文地址：http://weblogs.asp.net/skillet/archive/2005/03/24/395838.aspx

<html>
<head>
<title>TEST</title>
<style>
body,td{
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
}
</style>
<script type=”text/javascript”>
    var start=0;
    var end=0;
    function add(){       
        var textBox = document.getElementById(“ta”);
        var pre = textBox.value.substr(0, start);
        var post = textBox.value.substr(end);
        textBox.value = pre + document.getElementById(“inputtext”).value + post;
    }
    function savePos(textBox){
        //如果是Firefox(1.5)的话，方法很简单
        if(typeof(textBox.selectionStart) == “number”){
            start = textBox.selectionStart;
            end = textBox.selectionEnd;
        }
        //下面是IE(6.0)的方法，麻烦得很，还要计算上’\n’
        else if(document.selection){
            var range = document.selection.createRange();
            if(range.parentElement().id == textBox.id){
                // create a selection of the whole textarea
                var range_all = document.body.createTextRange();
                range_all.moveToElementText(textBox);
                //两个range，一个是已经选择的text(range)，一个是整个textarea(range_all)
                //range_all.compareEndPoints()比较两个端点，如果range_all比range更往左(further to the left)，则                //返回小于0的值，则range_all往右移一点，直到两个range的start相同。
                // calculate selection start point by moving beginning of range_all to beginning of range
                for (start=0; range_all.compareEndPoints(“StartToStart”, range) < 0; start++)
                    range_all.moveStart(‘character’, 1);
                // get number of line breaks from textarea start to selection start and add them to start
                // 计算一下\n
                for (var i = 0; i <= start; i ++){
                    if (textBox.value.charAt(i) == ‘\n’)
                        start++;
                }
                // create a selection of the whole textarea
                 var range_all = document.body.createTextRange();
                 range_all.moveToElementText(textBox);
                 // calculate selection end point by moving beginning of range_all to end of range
                 for (end = 0; range_all.compareEndPoints(‘StartToEnd’, range) < 0; end ++)
                     range_all.moveStart(‘character’, 1);
                     // get number of line breaks from textarea start to selection end and add them to end
                     for (var i = 0; i <= end; i ++){
                         if (textBox.value.charAt(i) == ‘\n’)
                             end ++;
                     }
                }
            }
        document.getElementById(“start”).value = start;
        document.getElementById(“end”).value = end;
    }
</script>
</head>
<body>
<form action=”a.cgi”>
<table border=”1″ cellspacing=”0″ cellpadding=”0″>
    <tr>
        <td>start: <input type=”text” id=”start” size=”3″/></td>
        <td>end: <input type=”text” id=”end” size=”3″/></td>
    </tr>
    <tr>
        <td colspan=”2″>
            <textarea id=”ta” onKeydown=”savePos(this)”
                            onKeyup=”savePos(this)”
                            onmousedown=”savePos(this)”
                            onmouseup=”savePos(this)”
                            onfocus=”savePos(this)”
                            rows=”14″ cols=”50″></textarea>
        </td>
    </tr>
    <tr>
        <td><input type=”text” id=”inputtext” /></td>
        <td><input type=”button” onClick=”add()” value=”Add Text”/></td>
    </tr>
</table>
</form>
</body>
</html>

*************************************************************

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<meta name=”GENERATOR” content=”Microsoft FrontPage 4.0″>
<meta name=”ProgId” content=”FrontPage.Editor.Document”>
<title>光标位置</title>
<style>
INPUT{border: 1 solid #000000}
BODY,TABLE{font-size: 10pt}
</style>
</head>
<body>
<table border=”0″ width=”700″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”479″ rowspan=”7″>
点击 TextArea 实现光标定位
<p>
<textarea rows=”7″ cols=”49″ id=”box” onclick=tellPoint()>我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸
为了你我愿意
动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离
如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹
也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里
我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离
</textarea>

<script>

function movePoint()
{
var pn = parseInt(pnum.value);

if(isNaN(pn))
return;

var rng = box.createTextRange();

rng.moveStart(“character”,pn);

rng.collapse(true);

rng.select();

returnCase(rng)

}

function tellPoint()
{
var rng = event.srcElement.createTextRange();

rng.moveToPoint(event.x,event.y);
rng.moveStart(“character”,-event.srcElement.value.length)

pnum.value = rng.text.length

returnCase(rng)
}

function returnCase(rng)
{
bh.innerText = rng.boundingHeight;
bl.innerText = rng.boundingLeft;
bt.innerText = rng.boundingTop;
bw.innerText = rng.boundingWidth;
ot.innerText = rng.offsetTop;
ol.innerText = rng.offsetLeft;
t.innerText = rng.text;
}

function selectText(sp,ep)
{
sp = parseInt(sp)
ep = parseInt(ep)

if(isNaN(sp)||isNaN(ep))
return;

var rng = box.createTextRange();

rng.moveEnd(“character”,-box.value.length)
rng.moveStart(“character”,-box.value.length)

rng.collapse(true);

rng.moveEnd(“character”,ep)
rng.moveStart(“character”,sp)

rng.select();

returnCase(rng);
}

var rg = box.createTextRange();

function findText(tw)
{
if(tw==”")
return;

var sw = 0;

if(document.selection)
{
sw = document.selection.createRange().text.length;
}

rg.moveEnd(“character”,box.value.length);

rg.moveStart(“character”,sw);

if(rg.findText(tw))
{
rg.select();

returnCase(rg);
}

if(rg.text!=tw)
{
alert(“已经搜索完了”)
rg = box.createTextRange()
}

}

</script>
</p>
<p></p>
光标位置：<input type=”text” value=”0″ id=”pnum” size=”8″> <input type=”button” onclick=”movePoint()” value=”移动光标到指定位置”>
<p></p>
选择指定范围：<input type=”text” size=”9″ id=”sbox”> — <input type=”text” size=”9″ id=”ebox”> <input type=”button” onclick=”selectText(sbox.value,ebox.value)” value=”选择”>
<p></p>
选择查找字符 ：<input type=”text” value=”" id=”cbox” size=”8″> <input type=”button” onclick=”findText(cbox.value)” value=”查找下一个并选择”>

</td>
<td width=”217″>boundingHeight: <span id=”bh”></span></td>
</tr>
<tr>
<td width=”217″>boundingWidth: <span id=”bw”></span></td>
</tr>
<tr>
<td width=”217″>boundingTop: <span id=”bt”></span></td>
</tr>
<tr>
<td width=”217″>boundingLeft: <span id=”bl”></span></td>
</tr>
<tr>
<td width=”217″>offsetLeft: <span id=”ol”></span> </td>
</tr>
<tr>
<td width=”217″>offsetTop: <span id=”ot”></span> </td>
</tr>
<tr>
<td width=”217″>text: <span style=”position: absolute; z-index: 10″ id=”t”></span> </td>
</tr>
</table>
</body>

</html>

 

*************************************************************
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> 兼容firefox下选择textarea文字的js代码_脚本之家_www.jb51.net </TITLE>
<META NAME=”Generator” CONTENT=”EditPlus”>
<META NAME=”Author” CONTENT=”">
<META NAME=”Keywords” CONTENT=”">
<META NAME=”Description” CONTENT=”">
<script type=”text/javascript”>
    function getSelectedText(){
        var selectedText;
        var textField=document.getElementById(‘inputTextarea’);
        if(window.getSelection) selectedText=getTextFieldSelection(textField);//getTextFieldSelection(document.getElementById(“inputTextArea”));
        else selectedText=document.selection.createRange().text;
            alert(selectedText);
    }

    function getTextFieldSelection(e){
        //var oEvent=arguments.callee.caller.arguments[0];
        if(e.selectionStart != undefined && e.selectionEnd != undefined)
            return e.value.substring(e.selectionStart,e.selectionEnd);
        else return “”;
    }
</script>
<style type=”text/css”>
    ul{
        list-style:none;
    }
</style>
</HEAD>

<BODY>
    <ul>
        <li>兼容firefox下选取textarea文本的方法</li>
        <li><textarea id=”inputTextarea” rows=”6″ cols=”50″/>千万别相信我说的事情，我从来就没有这么勇敢过，这么壮烈过。我不断发誓要老老实实讲故事，可是说实话的愿望有多强烈，受到的各种干扰就有多大。我悲哀地发现根本就无法还原真相。记忆总是被我的情感改头换面，并随之捉弄我，背叛我。把我搞得头昏脑胀，真假难辩。</textarea></li>
        <li><button onclick=”getSelectedText();”>获取选中的文字段</button></li>
    </ul>
</BODY>
</HTML>
本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/14735.htm

Go to Top