页面跨域访问的问题

在web项目中，有时候需要获取其他服务的数据，这个时候可以用ajax去获取。

但是我们的web页面中需要去访问其他服务的一个页面，在此页面上去查询或者选择某些信息，并从那个页面获取操作的信息。

这个是个典型的跨域访问的问题。

这里介绍一个比较实用的方法，只是这个方法需要被访问的服务端进行配合：具体步骤如下：

1.准备一个本地的“容器页面”container.jsp，称这个页面为“容器” 是因为这样页面只嵌入一个<iframe> 的标签，并且这个标签的src属性为被访问的服务页面的的地址，此外，我们在这个地址后面带上一个地址参数，这个参数是方便被访问端进行携带信息跳转的接收页面地址，如：

<body >
  <iframe name="page_interface_frame" id ="myifame"  src="http://ip:port/urlPath.jsp?url=http://127.0.0.1:本机服务端口/receive.jsp" width="100%" height="100%" ></iframe> 
</body>

2.创建接收页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
	String resInfo = request.getParameter("returnInfo");
%><html>
<body onload="init()">
 </body>
<script>
function init(){
	//alert("你访问了这个页面！！");

//把被访问服务携带过来的信息保存在 window.returnValue 对象中，并关闭这个窗口，这个值会返回到打开这个窗口返回对象中

window.returnValue = "<%=resInfo%>";
window.close();
}
</script><html>

3.使用window.showModalDialog 先弹出“容器”页面：

str = window.showModalDialog(container.jsp",null,"scroll:yes;resizable:no;help:no;status:no;dialogHeight:620px;dialogWidth:820px");

这样运行的效果为：

客服端去打开了 “容器”页面，而 “容器”这个页面又去访问了其他服务的页面在<iframe>标签中显示，并带上了操作完成之后跳转到我们本地服务的 “ 接收”页面的地址参数，我们操作其他服务页面之后点击 “确定”或者其他标示操作完成的按钮的时候，被访问的页面应该配合把信息放到约定好的字段中，并跳转到我们的 “接收”页面；到了我们的 “接收”页面之后，我们要做的就是取出对方携带的参数信息，并保存到 window.returnValue 对象中，且自动关闭这个窗口；以上步骤完成之后，我们就可以在window.showModalDialog 返回的对象中中取得其他服务页面操作返回的值了。

在被访问的页面中可以这样配合：

<form name="form1" id="form1" action="<%=url%>" method="post" TARGET="_self">
    <input type="hidden" id="returnInfo" name="returnInfo" value="">
</form>

url为我们的 “容器”页面携带过去的，目的是要对方知道跳转到那个地址，returnInfo则是在被访问的页面上操作的数据，填写好之后触发提交操作，就跳转我们本地的“接收”页面了。

秒客网

页面跨域访问的问题

相关文章