本文介绍如何使用IFRAME解决Html跨域调用分布式http API接口的问题。通过示例展示js如何访问IFRAME内页面的方法，实现不同域页面间的通信。
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部分：
<script type="text/javascript">
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;
}
</script>
5.html body部分：
<body onload=" init()">
<IFRAME id="xmapengine" name="xmapengine"; width="460" Height="500" frameborder="0" src="http://218.67.118.43/xme/openlayer/Map/XMapEngine.html">
</IFRAME>
<IFRAME id="swords" name="swords"; width="460" Height="500" frameborder="0" src="http://youlinkme.net:3308/cogweb/swords/index.php?keyword=">
</IFRAME>
</body>
6.总结：
总得来说写的比较简单，笔者水平有限，欢迎拍砖。
一个页面要处理不同域下的http的API接口时，使用IFRAME 标签来出来会比较的方便。同时注意js调用页面下方法的写法（见：3.js访问IFRAME标签下的html页面的方法）。
转载请注明出处：http://blog.youkuaiyun.com/lestat1225/article/details/6872087
扫一扫
3238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
