weidagang2046的专栏

物格而后知致
随笔 - 8, 文章 - 409, 评论 - 101, 引用 - 0
数据加载中……

用script方式解决iframe中不能跨域访问的问题

标题的措词拼凑了半天，现在看来还是不太通顺。其实就是这么一个问题，在网页中iframe的页面如果和主页面的域名不一致的话，那么是不能互相访问和控制的，而在实际应用中很可能就需要实现跨域访问的功能，那么我们就可以用script的方式来实现。

在我们的一个项目中有这样的“在线注册”应用：各个客户的网站有一个在线注册页面（siteA.com/send.asp，我们称之为A），这个页面要求用户填写自己的序列号，然后提交给我们公司一个统一的注册地址（siteB.com/makepsw.asp，称之为B），在这个统一页面(B)计算注册码，然后发回给客户的注册页面，客户取得注册码以后，在先前的注册页面(A)中再提交给自己的系统而完成注册过程。

这是A页面的基本代码：

<form name="form1" method="post" action="">
<table>
<tr>
<td>请输入软件序列号：<br>
<input name="sn" type="text" class="ipt1" id="sn" size="26"></td>
</tr>
<tr>
<td>请输入注册密码：<br>
<input name="password" type="text" class="ipt1" id="password" size="50">
<input name="getpsw" type="button" class="bt1" id="getpsw" style="width:90px" value="获取注册密码"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><input name="reg" type="button" class="bt1" id="reg" value="注 册"></td>
</tr>
</table>
</form>
注：这儿就是要实现当用户点击“获取注册密码”按钮以后，注册密码获取以后会自动填写到相应的输入表单中。
一开始想到了用iframe来实现，当B页面获取以后，用如parent.document.form1.password.value=?这样的代码来实现自动填写，在本机上测试都正常了，可是传到网上就出了错：
Error: 拒绝访问。

最后还是放弃iframe方式，改用script方式，效果非常好，基本上实现了我开始设想的功能。因为script正好是允许跨域调用的，可以举出最近的例子：一个就是PJBlog的后台首页一段提醒用户该升级的代码，另一个就是Google的ADSense代码。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>系统在线注册</title>
<script language="JavaScript" type="text/JavaScript">
function getpsw_onclick(){
 var url;
 var o=document.getElementById("js_getpsw");
 with(document.form1){
  if(confirm('该操作要求您连接上Internet，您确定吗？')){
   getpsw.value="请稍候";
   getpsw.disabled=true;
   reg.disabled=true;
   url="<a href="http://siteB.com/makepsw.asp?sn=" target="_blank">http://siteB.com/makepsw.asp?sn=</a>"+sn.value;
   o.setAttribute("src",url);
  }
 }
}
function reg_onclick(){
 with(document.form1){
  if(password.value==""){
   alert("请输入注册码，如果您还未获得注册码，请点击“获取注册码”按钮。");
   password.focus();
  }
  else
   submit();
 }
}
</script>
</head>
<body>
<form name="form1" method="post" action="myself.asp">
<table>
<tr>
<td>请输入软件序列号：<br>
<input name="sn" type="text" class="ipt1" id="sn" size="30"></td>
</tr>
<tr>
<td>请输入注册密码：<br>
<input name="password" type="text" class="ipt1" id="password" size="30">
<input name="getpsw" type="button" class="bt1" id="getpsw" style="width:90px" onClick="javascript:getpsw_onclick()" value="获取注册密码"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><input name="reg" type="button" class="bt1" id="reg" value="注 册" onClick="javascript:reg_onclick()"></td>
</tr>
</table>
</form>
注：用户点击“获取注册密码”按钮，把序列号发送到siteB.com的服务器并获取到注册密码以后，点击“注册”就提交到自己的服务器中。
<script language="JavaScript" type="text/javascript" src="about:blank" id="js_getpsw"></script>
</body>
</html>

这是B页面的代码：

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<%Option Explicit%>
<%
'说明：改页取得用户的序列号以后，计算注册码，然后用动态JavaScript的写入方式向输入表单填充数据。

'忽略错误
On Error Resume Next

'定义变量（sn序列号，psw注册码）
dim sn,psw

'取得查询字符串中的序列号
sn=Trim(Request.QueryString("sn"))

'变换（可以和数据库相连作复杂变幻）
psw=StrReverse(sn)

'输出反馈
if err then
    response.write "alert('对不起，注册过程中发生错误，请与我们联系。\n\n电话：010-12345678');with(document.form1){getpsw.value='获取失败！';}"
else
    response.write "with(document.form1){password.value='" & psw & "';reg.disabled=false;getpsw.value='获取成功！';}this.src='about:blank';"
end if
%>

from: http://www.ziyuehome.com/article.asp?id=89

posted on 2006-11-21 21:41 weidagang2046 阅读(15813) 评论(8)  编辑  收藏 所属分类: Javascript

评论

# re: 用script方式解决iframe中不能跨域访问的问题  回复  更多评论   

博主你真是搞笑，这叫什么iframe跨域访问啊？？

2011-06-23 11:58 | 我晕死啊哈哈

# re: 用script方式解决iframe中不能跨域访问的问题  回复  更多评论   

代码里没有iframe，鉴定完毕
2012-02-27 19:06 | iframe在哪呢

# re: 用script方式解决iframe中不能跨域访问的问题  回复  更多评论   

非常的郁闷之文章
2012-04-06 17:31 | 林惠强

# re: 用script方式解决iframe中不能跨域访问的问题  回复  更多评论   

相当郁闷
2012-04-19 10:13 | 嗷嗷嗷

# re: 用script方式解决iframe中不能跨域访问的问题[未登录]  回复  更多评论   

唉，没用
2012-07-10 17:39 | X

# re: 用script方式解决iframe中不能跨域访问的问题  回复  更多评论   

标题党，鉴定完毕
2012-12-05 17:30 | 我的兵营

# re: 用script方式解决iframe中不能跨域访问的问题  回复  更多评论   

太坑爹了。。。你这个需求简单的post+js就可以解决了。
2013-08-08 09:23 | 坑爹货

# re: 用script方式解决iframe中不能跨域访问的问题  回复  更多评论   

这是jsonp方式，不是iframe，不过文章还是不错的～
2013-10-15 10:38 | IT

只有注册用户登录后才能发表评论。
网站导航: