转到正文

浪淘沙

静观己心,厚积薄发

存档

标签: javascript

js有的时候会出现,将方法名称作为一个参数传递到方法中,然后再调用。这个时候,就有可能会出现问题。

场景一

<html>
<head>
<title>js fucntion name as the paramter</title>
</head>
<body>

<input type="button" name="button" value="button" onclick="passParam(fname);">button content</button>
</body>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function passParam(param) {
alert(typeof param);
param("sssssss");
}
function fname(s) {
alert("fname:(" + s + ")");
}
</script>
</html>

这种情况,没有任何问题,可以直接调用。typeof  param 结果为 function

场景二

<html>
<head>
<title>js fucntion name as the paramter</title>
</head>
<body>

<input type="button" name="button" value="button" onclick="passParam('fname');">button content</button>
</body>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function passParam(param) {
alert(typeof param);
param("sssssss");
}
function fname(s) {
alert("fname:(" + s + ")");
}
</script>
</html>

和场景一唯一不同的就是参数使用引号包裹了下,就这么一点点差别,结果却是完全不同。typeof param 的结果为string .最终的运行结果为:TypeError: param is not a function。这样操作,js尝试运行的是param而不是param对应的值fname。

这个时候有同学就说,使用eval,eval将任何的string作为code来运行。

场景三

<html>
<head>
<title>js fucntion name as the paramter</title>
</head>
<body>

<input type="button" name="button" value="button" onclick="passParam('fname');">button content</button>
</body>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function passParam(param) {
alert(typeof param);
eval("param(\"sssssss\")");
}
function fname(s) {
alert("fname:(" + s + ")");
}
</script>
</html>

结果依然和场景二一样。这个时候会有同学说:“不对,不对,你的eval使用方法错了”。然后这个同学给出了TA自己eval方法的实现方式

场景四

<html>
<head>
<title>js fucntion name as the paramter</title>
</head>
<body>

<input type="button" name="button" value="button" onclick="passParam('fname');">button content</button>
</body>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function passParam(param) {
alert(typeof param);
eval(param + "(\"sssssss\")");
}
function fname(s) {
alert("fname:(" + s + ")");
}
</script>
</html>

运行,ok很好。正确执行了相应的方法,问题得到了解决。

大家都知道eval的功能异常的强大,强大到我们不敢、也不能随随便便使用它。那么我们能不能不适用eval方法的实现方式哪?大家开动脑筋,想了一会,这个时候有另外一个同学兴奋的说有了,可以使用setTimeout间接调用

场景五

<html>
<head>
<title>js fucntion name as the paramter</title>
</head>
<body>

<input type="button" name="button" value="button" onclick="passParam('fname');">button content</button>
</body>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function passParam(param) {
alert(typeof param);
setTimeout(param + "(\"ssssss\")",0);
}
function fname(s) {
alert("fname:(" + s + ")");
}
</script>
</html>

运行结果很好。那么是否还有其他方法可以实现这个哪?大家又陷入了深思。。

“window,可以使用当前window对象。我们定义的所有元素都会包含在window对象里面。”  这个时候一个默默无闻的同学终于开口了。

场景六

<html>
<head>
<title>js fucntion name as the paramter</title>
</head>
<body>

<input type="button" name="button" value="button" onclick="passParam('fname');">button content</button>
</body>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function passParam(param) {
alert(typeof param);
// find object
var fn = window[param];
// is object a function?
if (typeof fn === "function") fn("sssss");
}
function fname(s) {
alert("fname:(" + s + ")");
}
</script>
</html>

运行下,非常棒。

这个方法还可以优化下。

场景七

<html>
<head>
<title>js fucntion name as the paramter</title>
</head>
<body>

<input type="button" name="button" value="button" onclick="passParam('fname');">button content</button>
</body>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function passParam(param) {
alert(typeof param);

<div class="post-message " dir="auto" data-role="message">

if(param in window && typeof window[param] == 'function') window[param]("sssss");
}
function fname(s) {
alert("fname:(" + s + ")");
}
</script>
</html>

不错不错。

还可以再优化,可以抽象出来

/**
 * 根据字符串类型的方法名 调用对应的js function
 * executeFunctionByName("My.Namespace.functionName", window, arguments);
 * executeFunctionByName("Namespace.functionName", My, arguments);
 *
 * @param functionName
 * @param context
 * @returns {*}
 */

var smvcJSUtil = {
    executeFunctionByName: function (functionName, context /*, args */){ //对调 functionName function
        var args = [].slice.call(arguments).splice(2);
        var namespaces = functionName.split(".");
        var func = namespaces.pop();
        for (var i = 0; i < namespaces.length; i++) {
            context = context[namespaces[i]];
        }
        return context[func].apply(this, args);
    },
    functionExistsByName: function(functionName) { //判断制定字符串是否为function
        return functionName in window && typeof window[functionName] == 'function'
    }
};

方法越来越好了。。我们原来的问题不但解决了,而且还因此学到了很多知识。

参考:

http://www.sitepoint.com/call-javascript-function-string-without-using-eval/

http://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string

 

原文地址:理解Javascript的闭包

前言:还是一篇入门文章。Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点ECMAScript语言规范来使读者可以更深入的理解闭包。

注:本文是入门文章,例子素材整理于网络,如果你是高手,欢迎针对文章提出技术性建议和意见。本文讨论的是Javascript,不想做语言对比,如果您对Javascript天生不适,请自行绕道。

什么是闭包

闭包是什么?闭包是Closure,这是静态语言所不具有的一个新特性。但是闭包也不是什么复杂到不可理解的东西,简而言之,闭包就是:

• 闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。

• 闭包就是就是函数的“堆栈”在函数返回后并不释放,我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配

• 当在一个函数内定义另外一个函数就会产生闭包

上面的第二定义是第一个补充说明,抽取第一个定义的主谓宾——闭包是函数的‘局部变量’集合。只是这个局部变量是可以在函数返回后被访问。(这个不是官方定义,但是这个定义应该更有利于你理解闭包)

做为局部变量都可以被函数内的代码访问,这个和静态语言是没有差别。闭包的差别在于局部变变量可以在函数执行结束后仍然被函数外的代码访问。这意味着函数必须返回一个指向闭包的“引用”,或将这个”引用”赋值给某个外部变量,才能保证闭包中局部变量被外部代码访问。当然包含这个引用的实体应该是一个对象,因为在Javascript中除了基本类型剩下的就都是对象了。可惜的是,ECMAScript并没有提供相关的成员和方法来访问闭包中的局部变量。但是在ECMAScript中,函数对象中定义的内部函数() inner function是可以直接访问外部函数的局部变量,通过这种机制,我们就可以以如下的方式完成对闭包的访问了。

function greeting(name) {
    var text = 'Hello ' + name; // local variable
    return function() { alert(text); }  // 每次调用时,产生闭包,并返回内部函数对象给调用者
}
var sayHello=greeting("Closure");
sayHello()  // 通过闭包访问到了局部变量text

上述代码的执行结果是:Hello Closure,因为sayHello()函数在greeting函数执行完毕后,仍然可以访问到了定义在其之内的局部变量text。

好了,这个就是传说中闭包的效果,闭包在Javascript中有多种应用场景和模式,比如Singleton,Power Constructor等这些Javascript模式都离不开对闭包的使用。

ECMAScript闭包模型

ECMAScript到底是如何实现闭包的呢?想深入了解的亲们可以获取ECMAScript 规范进行研究,我这里也只做一个简单的讲解,内容也是来自于网络。

在ECMAscript的脚本的函数运行时,每个函数关联都有一个执行上下文场景(Execution Context) ,这个执行上下文场景中包含三个部分

  • 文法环境(The LexicalEnvironment)
  • 变量环境(The VariableEnvironment)
  • this绑定

其中第三点this绑定与闭包无关,不在本文中讨论。文法环境中用于解析函数执行过程使用到的变量标识符。我们可以将文法环境想象成一个对象,该对象包含了两个重要组件,环境记录(Enviroment Recode),和外部引用(指针)。环境记录包含包含了函数内部声明的局部变量和参数变量,外部引用指向了外部函数对象的上下文执行场景。全局的上下文场景中此引用值为NULL。这样的数据结构就构成了一个单向的链表,每个引用都指向外层的上下文场景。

例如上面我们例子的闭包模型应该是这样,sayHello函数在最下层,上层是函数greeting,最外层是全局场景。如下图:

因此当sayHello被调用的时候,sayHello会通过上下文场景找到局部变量text的值,因此在屏幕的对话框中显示出”Hello Closure”

变量环境(The VariableEnvironment)和文法环境的作用基本相似,具体的区别请参看ECMAScript的规范文档。

闭包的样列

前面的我大致了解了Javascript闭包是什么,闭包在Javascript是怎么实现的。下面我们通过针对一些例子来帮助大家更加深入的理解闭包,下面共有5个样例,例子来自于JavaScript Closures For Dummies(镜像)

例子1:闭包中局部变量是引用而非拷贝

function say667() {
    // Local variable that ends up within closure
    var num = 666;
    var sayAlert = function() { alert(num); }
    num++;
    return sayAlert;
}
var sayAlert = say667();
sayAlert()

因此执行结果应该弹出的667而非666。

例子2:多个函数绑定同一个闭包,因为他们定义在同一个函数内。

function setupSomeGlobals() {
    // Local variable that ends up within closure
    var num = 666;
    // Store some references to functions as global variables
    gAlertNumber = function() { alert(num); }
    gIncreaseNumber = function() { num++; }
    gSetNumber = function(x) { num = x; }
}
setupSomeGolbals(); // 为三个全局变量赋值
gAlertNumber(); //666
gIncreaseNumber();
gAlertNumber(); // 667
gSetNumber(12);//
gAlertNumber();//12

例子3:当在一个循环中赋值函数时,这些函数将绑定同样的闭包

function buildList(list) {
    var result = [];
    for (var i = 0; i < list.length; i++) {
        var item = 'item' + list[i];
        result.push( function() {alert(item + ' ' + list[i])} );
    }
    return result;
}
function testList() {
    var fnlist = buildList([1,2,3]);
    // using j only to help prevent confusion - could use i
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}

testList的执行结果是弹出item3 undefined窗口三次,因为这三个函数绑定了同一个闭包,而且item的值为最后计算的结果,但是当i跳出循环时i值为4,所以list[4]的结果为undefined.

例子4:外部函数所有局部变量都在闭包内,即使这个变量声明在内部函数定义之后。

function sayAlice() {
    var sayAlert = function() { alert(alice); }
    // Local variable that ends up within closure
    var alice = 'Hello Alice';
    return sayAlert;
}
var helloAlice=sayAlice();
helloAlice();

执行结果是弹出”Hello Alice”的窗口。即使局部变量声明在函数sayAlert之后,局部变量仍然可以被访问到。

例子5:每次函数调用的时候创建一个新的闭包

function newClosure(someNum, someRef) {
    // Local variables that end up within closure
    var num = someNum;
    var anArray = [1,2,3];
    var ref = someRef;
    return function(x) {
        num += x;
        anArray.push(num);
        alert('num: ' + num +
        '\\nanArray ' + anArray.toString() +
        '\\nref.someVar ' + ref.someVar);
    }
}
closure1=newClosure(40,{someVar:'closure 1'});
closure2=newClosure(1000,{someVar:'closure 2'});
closure1(5); // num:45 anArray[1,2,3,45] ref:'someVar closure1'
closure2(-10);// num:990 anArray[1,2,3,990] ref:'someVar closure2'

闭包的应用

Singleton 单件:

var singleton = function () {
    var privateVariable;
    function privateFunction(x) {
        ...privateVariable...
    }
    return {
        firstMethod: function (a, b) {
            ...privateVariable...
        },
        secondMethod: function (c) {
            ...privateFunction()...
        }
    };
}();

这个单件通过闭包来实现。通过闭包完成了私有的成员和方法的封装。匿名主函数返回一个对象。对象包含了两个方法,方法1可以方法私有变量,方法2访问内部私有函数。需要注意的地方是匿名主函数结束的地方的’()’,如果没有这个’()’就不能产生单件。因为匿名函数只能返回了唯一的对象,而且不能被其他地方调用。这个就是利用闭包产生单件的方法。

参考:

JavaScript Closures For Dummies(镜像) 可惜都被墙了。

Advance Javascript (Douglas Crockford 大神的视频,一定要看啊)

原文地址:理解Javascript的闭包

另外一篇 Javascript中Closure及其相关概念  感觉也不错。

关于js闭包的问题 自己还是需要好好地研究研究

原文地址:JS实现拖动div层移动

JS实现拖动div层移动

      在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别—-  pageX,pageY,layerX,layerY,clientX,clientY,screenX,screenY,offsetX之间的区别!

     PageX: 鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.(只有firefox等标准游览器特有,IE没有)。
clientX: 鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

这两个最主要的区别是 在有滚动条的情况下,pageX是不随滚动条变化而变化,clientx是在可视区域内的距离,不包括滚动条的距离。

  screenX: 鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议.

     offsetX和layerX

      offsetX   IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。

      layerX:   firefox特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点 也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点,FF从border开始.

    pageX,pageY只有firefox特有,IE没有,所以要针对游览器兼容性写个函数,Jquery源码中 这样写的,

    所以我们也可以针对写个公用的函数,代码如下:

function pageXY(e) {
    var event = e || window.event;

    var doc = document.documentElement,
          body = document.body;

    // IE
    if (event.pageX == null && event.clientX !=  null ) {
        var doc = document.documentElement,
            body = document.body;
            event.pageX = event.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );

            event.pageY = event.clientY + ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop  || 0 );

            return {
                x : event.pageX,
                y : event.pageY
            }
        }

        // firefox
        return {
            x : event.pageX,
            y : event.pageY
        }
    }

offsetX 是IE特有的 layerX是firefox特有的,所以针对这两个也可以写个公用的函数 代码如下:

 

function offsetXY(e) {
    var event = e || window.event;
    return {
         x:event.offsetX || event.layerX,
                 y:event.offsetY || event.layerY
    }
}

 

JSFiddle链接代码如下:

 想看div层拖动的话 请点击我!

拖动层的基本原理是:

首先先来理解下 我们要在页面上拖动某一块 到 页面上的另外一个位置 那么肯定这块元素是绝对定位的 并且 我们移动它时 是不断的改变他们的top值和left值!再者 我们拖动它时候肯定要触发事件!有 onmousedown事件!

  那么我们现在是要计算的是 我们这个元素被拖动到页面上的某个位置时的 左上标的位置X和Y。

      如下图所示:

      

 

要计算元素的左上的x和y坐标 如上图所示:就是指x = clientX-offsetX + “px”; y= clientY-offsetY + “px”;

HTML和CSS代码如下:

 

<div id="father" style="border:0px solid red;width:200px;">
    <div id="a" style="background:red;width:100px;height:100px">长,宽都是100px</div>
    <div id="b" style="border-top:0px solid red;background:yellow;width:100px;height:100px;margin-left:100px;"></div>
    </div>
<style>
    #oDiv{ width:200px; height:200px; color:#fff;background:#00C; position:absolute; top:200px; left:200px; z-index:100;overflow:hidden;}
 </style>

 

JS所有代码如下:

function pageXY(e) {
    var event = e || window.event;

    var doc = document.documentElement,
        body = document.body;

    // IE
    if (event.pageX == null && event.clientX !=  null ) {
        var doc = document.documentElement,
            body = document.body;

            event.pageX = event.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );

            event.pageY = event.clientY + ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop  || 0 );

            return {
                x : event.pageX,
                y : event.pageY
            }
        }

        // firefox
        return {
            x : event.pageX,
            y : event.pageY
        }
    }

    function offsetXY(e) {
        var event = e || window.event;
        return {
             x:event.offsetX || event.layerX,
                         y:event.offsetY || event.layerY
        }
    }
    var $=function(id){
        return ("string"==typeof id) ? document.getElementById(id):id;
    };
    $('a').onmousemove = function(e){
        text(e);
    }
    $('b').onmousemove = function(e){
        text(e);
    }
    function text(e) {
        e = e || window.event;
        var offset = offsetXY(e),
            page = pageXY(e);

        var doc = document.documentElement,
            body = document.body;
                $("pageX").innerHTML= page.x;
        $("pageY").innerHTML= page.y;
        $("clientX").innerHTML=e.clientX;
        $("clientY").innerHTML=e.clientY;
        $("screenX").innerHTML=e.screenY;
        $("screenY").innerHTML=e.screenY;
        $("scrollTop").innerHTML=doc && doc.scrollTop;
        $("scrollLeft").innerHTML=doc && doc.scrollLeft;
        $("offsetX").innerHTML = offset.x;
        $("offsetY").innerHTML = offset.y;
    }

    window.onload = function () {
            var oDiv = document.getElementById("oDiv");//oDiv必须使用CSS定位
            oDiv.onmousedown = drag;
            function drag(evt) {
                evt = evt || window.event;
                this.onmouseup = drop;
                this.onmousemove = moveDiv;
                this.offset = {
                    x:evt.offsetX || evt.layerX, //layerX 和layerY是w3c标准的 offsetX 和 offsetY是IE标准的
                    y:evt.offsetY || evt.layerY
                };
            }
            function moveDiv(evt) {
                evt = evt || window.event;
                this.style.left = evt.clientX-this.offset.x+"px";
                this.style.top = evt.clientY-this.offset.y+"px";
            }
            function drop(evt) {
                this.onmouseup = null;
                this.onmousemove = null;
            }
        };

原文地址:JS实现拖动div层移动

另一个使用JQUERY的文章为:Jquery 实现层的拖动,支持回调函数

还有一个 “自己写了一个无缝滚动的插件(jQuery)”也很有意思

原文地址:http://www.jb51.net/article/35892.htm


//问题比如:7*0.8 JavaScript算出来就是:5.6000000000000005

//加法函数,用来得到精确的加法结果
//说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
//调用:accAdd(arg1,arg2)
//返回值:arg1加上arg2的精确结果
function accAdd(arg1, arg2) {
    var r1, r2, m;
    try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
    try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
    m = Math.pow(10, Math.max(r1, r2))
    return (arg1 * m + arg2 * m) / m
}
//用法:
//给Number类型增加一个add方法,调用起来更加方便。
Number.prototype.add = function (arg) {
    return accAdd(arg, this);
}
//如:
var t1 = 6.60;
var t2 = 1.32;
var t3 = 1.2;
var t4 = 1.2;
var t5 = 1.2;
alert(Number(t1).add(Number(t2)).add(Number(t3)).add(Number(t4)).add(Number(t5)));

//减法函数,用来得到精确的减法结果
function Subtr(arg1, arg2) {
    var r1, r2, m, n;
    try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
    try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
    m = Math.pow(10, Math.max(r1, r2));
    //last modify by deeka
    //动态控制精度长度
    n = (r1 >= r2) ? r1 : r2;
    return ((arg1 * m - arg2 * m) / m).toFixed(n);
}

//乘法函数,用来得到精确的乘法结果
//说明:javascript的乘法结果会有误差,在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
//调用:accMul(arg1,arg2)
//返回值:arg1乘以arg2的精确结果
function accMul(arg1, arg2) {
    var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
    try { m += s1.split(".")[1].length } catch (e) { }
    try { m += s2.split(".")[1].length } catch (e) { }
    return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
}
//用法:
//给Number类型增加一个mul方法,调用起来更加方便。
Number.prototype.mul = function (arg) {
    return accMul(arg, this);
}

//除法函数,用来得到精确的除法结果
//说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。
//调用:accDiv(arg1,arg2)
//返回值:arg1除以arg2的精确结果
function accDiv(arg1, arg2) {
    var t1 = 0, t2 = 0, r1, r2;
    try { t1 = arg1.toString().split(".")[1].length } catch (e) { }
    try { t2 = arg2.toString().split(".")[1].length } catch (e) { }
    with (Math) {
        r1 = Number(arg1.toString().replace(".", ""))
        r2 = Number(arg2.toString().replace(".", ""))
    return (r1 / r2) * pow(10, t2 - t1);
    }
}
//用法:
//给Number类型增加一个div方法,调用起来更加方便。

原文地址:http://www.jb51.net/article/35892.htm

原文地址:http://www.csdn.net/article/2013-05-08/2815182-javascript-this

其实如果完全掌握了this的工作原理,自然就不会走进这些坑。来看下以下这些情况中的this分别会指向什么:

1.全局代码中的this


alert(x);// 全局变量值为2

全局范围内的this将会指向全局对象,在浏览器中即使window继续阅读

有的时候,需要为一个function添加一个可选参数(Optional Parameter),当没有传递这样的一个参数的时候,会为这个参数设置一个默认值。

这个功能再php下面很容易就可以做到:


function testArgs($arg1 = 1, $arg2 = 2)

{

//code....

}

但是,再javascript下面这样就行不通了。因为javascript压根就不支持这种function的定义方法。但是也可以有变通的方法来解决这个种问题。 继续阅读

原文地址:http://blog.youmila.com/?p=513

关于跨域名问题还是问题么,这方面的解决实践非常多,今天我就旧话重提把我所知道的通过几个应用场景来分别总结一下

先说明一点:我说的某某域名在您的控制下的意思是这个域名下的网页由您来负责开发内部的JavaScript
场景一:将bbs.xxx.com的页面用iframe嵌入到www.xxx.com的中,如何在iframe内外使用js通信
一级域名都是xxx.com 这个域名一定是在您的控制下,所以你只要在两个页面中同时升级域名即可
在父窗口和iframe内部分别加上js语句:document.domain=”xxx.com”;
之后2个页面就等于在同一域名下,通过window.parent oIframe.contentDocument就可以相互访问,进行无障碍的JS通信
在新浪、淘宝等很多页面都能找到这样的语句。不过document.domain不可以随便指定,只能向上升级,从bbs.xxx.com升级到yyy.com肯定会出错 继续阅读

原文地址:http://www.infoq.com/cn/news/2013/01/50-javascript-chart-lib

在很多项目中都会有在前端展现数据图表的需求,而在开发过程中,开发者往往会使用一些JavaScript库,从而更有效地达到想要的目标。最近,TechSlide上的一篇文章总结了50种用于展现图表的JavaScript库,并对每种库做了简要的说明。这对于想要选择合适JavaScript库的开发者很有参考意义。

文章作者首推的库是D3,他说到:

它非常让人惊叹,我很喜欢它的简洁性。它的文档非常完备,源代码托管在GitHub上,而且不断会添加新的示例。有一种叫做Tributary的创建D3原型的工具,其中有很多非常棒的示例。这个库非常好,以至于xcharts、nvd3、Rickshaw、Cubism.js、dc.js、xkcd都是基于它构建的。如果你想要做出优秀的自定义数据可视化效果,那么D3可能是你最佳选择,或者对于更简单的图,你可以选择上面所提到的基于D3的库。最后,我强烈推荐阅读Scott Murray关于D3的免费书《Interactive Data Visualization for the Web》和《Dashing D3 tutorials》。

继续阅读

js实现页面跳转的实现方式之一为:


window.location.href="需要跳转的URL";

使用这个方法,需要注意的一点就是:当前页面的URL 和 需要跳转到的URL 一样的话,当前页面并不会执行操作。如果需要页面必须刷新的话,可以使用下面的代码来实现:


var current_href = window.location.href;

var jump_href = "需要跳转的URL";

if (jump_href == jump_href)  {//2个URL一致,只需要刷新即可

window.location.reload();

} else {//2个URL不一致,直接设置location即可

window.location.href= jump_href;

}

 

如果想了解更多

关于location 请参考 http://baike.baidu.com/view/2131711.htm .

关于js 页面跳转 请参考 http://wenku.baidu.com/view/39e170868762caaedd33d46f.html

 

 

原文地址:http://blog.csdn.net/shan9liang/article/details/7222110

————————————————————————————————————

如果你是一个Web开发初学者,那么你难免会在网上搜索HTML,CSS,XML,JS(Javascript),DOM,XSL等等这些词的意思,然而,随着学习的深入。当你把他们搅在一起,你又糊涂了,你会不停的问,HTML是什么?CSS是什么?XML是什么?JS是什么?它们到底有什么用?无论是网络百科,还是一些IT专题网站,又或者一些牛人博客,他们都会告诉你,某个单一的东西是什么,这类文章很多,但很少有涉及,它们组合起来是什么,有什么用。我想,我写这篇文章,就是为了说明一下这个他们很少涉及的问题。 继续阅读