个人中心
gpt4 book ai didi

javascript - 无法在跨域环境中访问 JS 功能

转载 作者：数据小太阳 更新时间：2023-10-29 04:37:23 33 4
gpt4 key购买 nike

为了解决JavaScript的跨域安全问题，我实现了以下方法

在域 [ abc.com ] 上

在域 abc.com 上，我有一个名为 main_page.html 的页面。其代码如下——

<script>
function SendMsg(id)
{
   frames["invisible_iframe"].location = "http://xyz.com/invisible_iframe.html#"+id;
}
</script>
<body>
  <input type="button" id="Test" value="Call iFrame" onclick="SendMsg(this.id);">
  <iframe src="ttp://xyz.com/visible_iframe.html" name="visible_iframe" height="250" width="500"></iframe>
  <iframe name="invisible_iframe" height="0" width="0" style="display:none;"></iframe>
</body>

在域 [ xyz.com ] 上

在域 xyz.com 上，我有一个名为 visible_iframe.html 的页面。其代码如下——

<script>
function Hi()
{
   alert("Hi there!");
}
</script>
<body>
  <h1>Visible iFrame on xyz.com
  <iframe name="d2_invisible_iframe" id="d2_invisible_iframe" class="iFrame" src="http://xyz.com/invisible_iframe.html" height="310" width="520"></iframe>
</body>

现在我想从 invisible_iframe.html(在同一个域中)访问函数 Hi()

invisible_iframe.html代码如下

<script>
var sActionText = "";
function CheckForMessages()
{
   if(location.hash != sActionText)
   {
     sActionText = location.hash;
     var sAction = "";
     var oSplitActionText = sActionText.split("#");
     sAction = oSplitActionText[1];
     if (sAction == "Test")
     {
        parent.Hi();
     }
   }
}

setInterval(CheckForMessages, 200); 
</script>
<body>
  <h1>Invisible iFrame on xyz.com</h1>
</body>

我在 visible_iframe.html 中使用隐藏的 iFrame，因为我不想更改 visible_iframe.html 的 URL。

现在我希望当单击 main_page.html 上的按钮时，我会收到警告消息。但那不会发生。在 Firefox 中它说 - Permission denied to access property 'Hi'

奇怪的是当我把parent.Hi();放在CheckForMessages()函数外面时，Hi()函数可以访问并显示警告框。

我应该怎么做才能解决这个问题？

最佳答案

为什么不使用 easyXDM ？这个库应该让你的生活变得非常轻松，并有助于在处理跨域问题时避免安全限制。特别是如果您可以控制这两个域。

easyXDM is a Javascript library that enables you as a developer to easily work around the limitation set in place by the Same Origin Policy, in turn making it easy to communicate and expose javascript API’s across domain boundaries.

[这是最好且易于使用的 API 之一] 可用于 Web 应用程序之间的跨域通信。easyXDM 易于使用、重量轻、灵活、编写高质量代码等。我强烈认为，如果您要继续使用跨域方案，那么您应该采用强大的跨域 api，例如 easyXDM .

[easyXDM 与 PostMessage 传输？]如果浏览器(IE8+、Opera 9+、Firefox 3+、Safari 4+、Chrome 2+)启用了此功能，easyXDM 将使用 PostMessageTransport 方法；另一方面，它将为不支持的浏览器使用不同的传输方法例如(Firefox 1-2 - 使用 FrameElementTransport)其他传输方法将根据需要使用，例如 FlashTransport、NameTransport 和 HashTransport。

这显然使 easyXDM 在浏览器支持方面更胜一筹，尤其是对旧浏览器的支持。

使用 easyXDM 演示跨域访问(域 1 [abc.com] 调用远程域 [xyz.com] 上的方法):

*域 [ abc.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>

在体内

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

现在在您的远程域端，您需要按如下方式定义您的远程客户端

*域 [ xyz.com ] - 远程域*

这应该进入页面 YOUR_APPLICATION/YourRemoteApplication.html

    <script type="text/javascript">
        /**
         * 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");
                        }
                    }
                }
            });
        }
    </script>

关于javascript - 无法在跨域环境中访问 JS 功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10928245/

33 4 0
文章推荐： c# - 从 C# 访问 AD 时出现 "A referral was returned from the server"异常
文章推荐： c# - 在 C#.NET 中动态转换为类型
文章推荐： c# - NotifyPropertyChanged 事件，其中事件参数包含旧值
文章推荐： javascript - 在 jQuery 中获取滚轮数量
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com