前台跨域调用js函数.
最近遇到一个问题，页面上嵌入的一个表单需要调用页面上的一个函数，因为表单是由表单系统提供的，所以他们不在一个域名下。
稍微查找了一下，这种一般是用 iframe 大法，因为虽然说是跨域，但其实浏览器的内部实现里还是有部分属性可以调用到的，其中window.parent , window.top,window.frames 之类 ，而如果这些window对象的 domain 如果是相同的，你就可以调用其中的方法了，所以根据这个思想，我写了一个比较通用的页面来实现。
不过可能有些童鞋不清楚这个 iframe大法具体怎么用，这里简要介绍一下。
假设一个场景，你的页面是d1/main.htm， 上面嵌入了一个第三方地图，比如就叫 d2/map.htm吧，main 上面有一个输入框，你输入了一个地方，map就会自动跳转到那个位置，这里使用的是 d2/map.htm 上的 move('place'); 这个js方法。
如果你试图通过获取 iframeMap.contentWindow.move('')，浏览器会告诉你，跨域了，无法调用。 这时候怎么办呢，首先，让d2提供一个 d2/func.htm， 内容如下
<script>
window.parent.move(param(place)); // 这里的 window.parent 是有问题的，不要吐槽了，举个例子而已 ^_^
</script>
然后在 main.htm 上弄一个隐藏的 iframeFunc ，然后 function move() { iframeFunc.src = 'd2/func.htm?place=place'; }, 这样，iframeFunc 载入的时候就会调用d2/map.htm 上的 move 方法了，iframe大法完成。
所以，这个通用页面只是处理一下这里的 window.parent 这个问题。
首先，func.htm 里面的 window.parent 是跨域的父页面。 而实际要调用的函数就不知道在哪个页面上了，所以虽然说是通用，其实还是无法考虑到全面，这里只查找window.parent.parent... 和 window.parent.frames... 这些.
上源码:
<script type="text/javascript"> // 参数说明 // page 要调用函数的页面地址 a.html // func 要调用的函数名称 // params 经过编码的字符串，调用函数的参数，多参数请自行修改 var url = window.location.href; var paraString = url.substring(url.indexOf("?")+1,url.length).split("&"); var paraObj = {}; for (i=0; j=paraString[i]; i++){ paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length); } if (paraObj['func'] && paraObj['page']) { function func_run(win, flag, url, params, defRun) { try { var hasRun = false; if (flag) { hasRun = win.func_flag && flag == win.func_flag; } if (url && !hasRun) { hasRun = win.location.pathname.indexOf(url) > -1; } if (hasRun) { var jsStr = 'parent.' + paraObj['func'] + '("' + params + '");'; eval(jsStr); } return hasRun; } catch (e) { return false; } } var parentTemp = window.parent; var targetPage = paraObj['page']; var hasRun = false; var params = paraObj['params']; var last = null; while (parentTemp) { if (hasRun) break; if (last != parentTemp) last = parentTemp; else break; try { hasRun = parentTemp.location.pathname.indexOf(targetPage) > -1; if (hasRun) { var js = 'parentTemp.' + paraObj['func'] + ((params) ? '(' + params + ');' : '();'); eval(js); break; } } catch (e) { } if (!hasRun) { for (var i = 0; i < parentTemp.frames.length; ++i) { try { var temp = parentTemp.frames[i].contentWindow; hasRun = temp.location.pathname.indexOf(targetPage) > -1; if (hasRun) { var js = 'parentTemp.' + paraObj['func'] + ((params) ? '(' + params + ');' : '();'); eval(js); break; } } catch (e) { } } } parentTemp = parentTemp.parent; } } </script>
其实本来是可以进行进一步的扩展的，首先是添加一个参数， flag ，而不是用页面的地址，在页面上预定义一个变量，如
window.func_flag = ‘1’; 而调用 c.html 的时候加上 func_flag=1, 这样只会对func_flag=1的页面进行调用。
另外params多参数。
还有run=once/all 这样，对 flag 和 page 之类的是只调用一次，还是对所有的页面调用，想了一下午，脑袋都炸了，不写那么多了。
OVER.
后续：
后来在实验中发现，表单页面不让添加iframe，所以上面的方法就悲剧掉了。所以使用了 postMessage大法。
在调用的时候
var msg = {};
msg.event = 'newPage';
msg.url = 'http://www.cnblogs.com/willin';
var msgJson = '({"event":"'+msg.event+'","url":,"'+msg.url+'"})'
parent.parent.postMessage(msg, '*'); // 这个后面的 ‘*’ 是指传入的页面地址。如 cnblogs.com，这样，如果parent.parent 不是 cnblogs.com 就不会触发。
在cnblogs.com 这个页面上加入
if (window.addEventListener)
window.addEventListener('message', function(event){
var data = eval(event.data);
if (data.event == 'newPage') {
window.addTab(data.url);
}
}, false);
在现代浏览器上都是可行的，据说IE7及一下不行，唉，还好XP下还是能用IE8的。 真希望IE6和7早点去死掉啊。
