html分布式加载,Html调用分布式http API接口方法

Html调用分布式http API接口方法

1.前言：Html调用分布式http API接口方法。很多开发者在开发html同时使用js的时候总是碰到跨域的问题，笔者使用IFRAME标签比较土的方法来解决这个问题。

2.问题和目的：

问题：在一个页面里现在同时包含了2个不同域的页面XMapEngine.html 和 index.php, 怎么样才能两个页面互相通讯呢？

目的：XMapEngine.html页面是笔者自己写的一个地图引擎，要求点击地图上点之后[onClickEvent(id, input)方法会响应点击事件，相当于java程序复写的监听器]

然后调用index.php页面index.php?keyword=xx的API接口

3.js访问IFRAME标签下的html页面的方法：

格式： [IFRAME  name属性的值].[window].[IFRAME  所指的src页面下的js方法]

例如：  xmapengine.window.relaod("map3.xml"); //访问XMapEngine.html页面下的relaod("map3.xml") 方法。

4.js部分：

function init(){

xmapengine.window.relaod("map3.xml");

}

/*

*XMapEngine 点击事件

*/

function onClickEvent(id, input){

alert("XMapEngine 点击事件 触发啦 === xen4.html"+id+input);

var swords =  document.getElementById("swords");

swords.src = "http://youlinkme.net:3308/cogweb/swords/index.php?keyword="+input;

}

5.html body部分：

6.总结：

总得来说写的比较简单，笔者水平有限，欢迎拍砖。

一个页面要处理不同域下的http的API接口时，使用IFRAME 标签来出来会比较的方便。同时注意js调用页面下方法的写法(见：3.js访问IFRAME标签下的html页面的方法)。