javascript跨域问题 easyXDM

     最近在做项目的时候遇到了JavaScript跨域的问题，JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。网上也有很多解决方案，没有找到适合的解决方法。最后使用了easyXDM解决了我的问题，使用easyXDM时有两个条件：1.浏览器要安装flash插件（具体支持的浏览器在说明文件里说的很清楚）2.要跨域的工程中都要引入easyXDM文件。希望能给需要的同学提供一个解决的方法。

       先说一下我的问题，项目涉及到两个工程，部署在不同的服务器上，http://127.0.0.1/a.jsp里嵌入一个iframe，iframe引入了一个http://127.0.xx.xx/b.jsp页面，b.jsp里嵌了一个flex页面，我在b.jsp中有一个表单提交的saveInfo()的js函数，我想在a.jsp里保存时调用saveInfo()。

 

       具体的使用方法在example里都有很好的例子，照着做就可以。要注意引入easyXDM.js和json2.js的引入。

下面是easyXDM的简要说明

http://stackoverflow.com/questions/10928245/cant-access-js-function-in-cross-domain-environment

[This is one of the best and easy to use APIs] available for Cross Domain Communication between web applications. easyXDM is easy to use, light weight, flexible, writing good quality code etc. I strongly think if you are going to continue with cross domain scenario, then you should adapt a robust cross domain apis such as easyXDM.

[easyXDM vs PostMessage Transport?] easyXDM will use the PostMessageTransport method if this feature is enabled by the browser such as (IE8+, Opera 9+, Firefox 3+, Safari 4+,Chrome 2+) on the other side it will use different transport methods for the un supported browsers such as (Firefox 1-2 - using the FrameElementTransport) other transport methods will be used as needed such as FlashTransport, NameTransport, and HashTransport).

 

This clearly makes easyXDM superior in terms on browser support specially the old browsers.

 

To demonstrate cross-domain access using easyXDM (Domain1 [abc.com] calls a method on a remote domain [xyz.com]):

 

<script type="text/javascript">
        /**
         * Request the use of the JSON object
         */
        easyXDM.DomHelper.requiresJSON("../json2.js");
    </script>
    <script type="text/javascript">
        var remote;
        window.onload = function(){
            /**
             * When the window is finished loading start setting up the interface
             */
            remote = new easyXDM.Interface(/** The channel configuration */{
                /**
                 * Register the url to hash.html, this must be an absolute path
                 * or a path relative to the root.
                 * @field
                 */
                local: "/hash.html",
                /**
                 * Register the url to the remote interface
                 * @field
                 */
                remote: "http://YOUR.OTHER.DOMAIN/YOUR_APPLICATION/YourRemoteApplication.html",
                /**
                 * Register the DOMElement that the generated IFrame should be inserted into
                 */
                container: document.getElementById("embedded")
            }, /** The interface configuration */ {
                remote: {
                    remoteApplicationMethod: {},
                    noOp: {
                        isVoid: true
                    }
                },
                local: {
                    alertMessage: {
                        method: function(msg){
                            alert(msg);
                        },
                        isVoid: true
                    }
                }
            },/**The onReady handler*/ function(){
                /**
                 * Call a method on the other side
                 */
                remote.noOp();
            });
        }

        function callRemoteApplicationMethod(Value1, Value2){
            remote.remoteApplicationMethod(Value1, Value2, function(result){
                alert("Results from remote application" + result);
            });
        }


    </script>

 In the body

<input type="button" onclick="callRemoteApplicationMethod(3,5)" value="call remoteApplicationMethod on remote domain"/>

 Now on your remote domain side you need to define your remote client as follows

*On Domain [ xyz.com ] - Remote domain*

This should go into the page YOUR_APPLICATION/YourRemoteApplication.html

 

   /**
         * Request the use of the JSON object
         */
        easyXDM.DomHelper.requiresJSON("../json2.js");
    </script>
    <script type="text/javascript">
        var channel, remote;
        /**
         * When the window is finished loading start setting up the channel
         */
        window.onload = function(){

            /**
             * When the channel is ready we create the interface
             */
            remote = new easyXDM.Interface(/** The channel configuration*/{}, /** The configuration */ {
                remote: {
                    alertMessage: {
                        isVoid: true
                    }
                },
                local: {
                    remoteApplicationMethod: {
                        method: doSomething(value1, value2){
                        // do somethigs with values

                        return "i'm return value from remote domain";
                        }
                    },
                    noOp: {
                        isVoid: true,
                        method: function(){
                            alert("Method not returning any data");
                        }
                    }
                }
            });
        }

 

       easyXDM地址