为了解决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>
现在我想Hi()从invisible_iframe.html(在同一个域上)访问该函数
代码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>
我正在使用隐藏的iFrame,visible_iframe.html因为我不希望更改visible_iframe.html的网址.
现在我希望当main_page.html点击按钮时,我会收到警告信息.但这不会发生.在Firefox中它说 - 权限被拒绝访问属性'嗨'
奇怪的是当我放置parent.Hi();外部CheckForMessages()功能时,Hi()可以访问该功能并显示警告框.
我该怎么做才能解决这个问题？
为什么不使用easyXDM？这个库应该让您的生活变得非常轻松，并有助于避免处理跨域问题时的安全限制。特别是如果您可以控制这两个域。
\n\n\n\n\neasyXDM 是一个 Javascript 库，使您作为开发人员能够轻松解决同源策略设置的限制，从而轻松地跨平台通信和公开 javascript API\xe2\x80\x99s域边界。
\n
[这是最好且易于使用的 API 之一]，可用于 Web 应用程序之间的跨域通信。\neasyXDM易于使用、轻量、灵活、编写高质量的代码等。我强烈认为您是否要继续跨域场景，那么你应该适配一个健壮的跨域api，例如easyXDM。
\n\n[easyXDM vs PostMessage Transport?] \n如果浏览器启用了此功能，例如（IE8+、Opera 9+、Firefox 3+、Safari 4+、Chrome 2+），easyXDM 将使用 PostMessageTransport 方法，而另一端将使用针对不支持的浏览器的不同传输方法，例如（Firefox 1-2 - 使用 FrameElementTransport）将根据需要使用其他传输方法，例如 FlashTransport、NameTransport 和 HashTransport）。
\n\n这显然使得easyXDM在浏览器支持方面（特别是旧浏览器）更胜一筹。
\n\n使用 easyXDM 演示跨域访问（Domain1 [abc.com] 调用远程域 [xyz.com] 上的方法）：
\n\n*在域 [ abc.com ] - 主域*
\n\n\n\n <script type="text/javascript">\n /**\n * Request the use of the JSON object\n */\n easyXDM.DomHelper.requiresJSON("../json2.js");\n </script>\n <script type="text/javascript">\n var remote;\n window.onload = function(){\n /**\n * When the window is finished loading start setting up the interface\n */\n remote = new easyXDM.Interface(/** The channel configuration */{\n /**\n * Register the url to hash.html, this must be an absolute path\n * or a path relative to the root.\n * @field\n */\n local: "/hash.html",\n /**\n * Register the url to the remote interface\n * @field\n */\n remote: "http://YOUR.OTHER.DOMAIN/YOUR_APPLICATION/YourRemoteApplication.html",\n /**\n * Register the DOMElement that the generated IFrame should be inserted into\n */\n container: document.getElementById("embedded")\n }, /** The interface configuration */ {\n remote: {\n remoteApplicationMethod: {},\n noOp: {\n isVoid: true\n }\n },\n local: {\n alertMessage: {\n method: function(msg){\n alert(msg);\n },\n isVoid: true\n }\n }\n },/**The onReady handler*/ function(){\n /**\n * Call a method on the other side\n */\n remote.noOp();\n });\n }\n\n function callRemoteApplicationMethod(Value1, Value2){\n remote.remoteApplicationMethod(Value1, Value2, function(result){\n alert("Results from remote application" + result);\n });\n }\n\n\n </script>\n在身体里
\n\n<input type="button" onclick="callRemoteApplicationMethod(3,5)" value="call remoteApplicationMethod on remote domain"/>\n现在，在远程域端，您需要定义远程客户端，如下所示
\n\n*在域 [ xyz.com ] - 远程域*
\n\n这应该进入页面 YOUR_APPLICATION/YourRemoteApplication.html
\n\n\n\n\n <script type="text/javascript">\n /**\n * Request the use of the JSON object\n */\n easyXDM.DomHelper.requiresJSON("../json2.js");\n </script>\n <script type="text/javascript">\n var channel, remote;\n /**\n * When the window is finished loading start setting up the channel\n */\n window.onload = function(){\n\n /**\n * When the channel is ready we create the interface\n */\n remote = new easyXDM.Interface(/** The channel configuration*/{}, /** The configuration */ {\n remote: {\n alertMessage: {\n isVoid: true\n }\n },\n local: {\n remoteApplicationMethod: {\n method: doSomething(value1, value2){\n // do somethigs with values\n\n return "i\'m return value from remote domain";\n }\n },\n noOp: {\n isVoid: true,\n method: function(){\n alert("Method not returning any data");\n }\n }\n }\n });\n }\n </script>\n