Iframe跨域传值

1.1. 新建一个web项目修改index.jsp

　　https://www.cnblogs.com/ysgcs/p/9148999.html  新建一个web

添加form表单

<form>
        输入用户名：<input type="text" name="userName" value="" id="name"/><br>
      密码：<input type="password" name="passWord" value="" id="password"><br>
          <input type="submit"  value="提交" name="submit" id="login">
  </form>

 

添加iframe嵌套子页面

<iframe src="子页面路径"
      width="500px" height="500px"  name="iframeId" style="display:none;"
      visibility="hidden" id="iframeId">
</iframe>

 

编写js，传参数给子页面

<script type="text/javascript" src="js/jquery.min.js" ></script>

 

 

<script>
    $('#login').click(function(){
        getData()
    })
    function getData(){
        var name = $('#name').val();
        var pass = $('#password').val();
        var obj = {
            name:name,
            pass:pass
        }
        var win = $('#iframeId')[0].contentWindow;
        win.postMessage(JSON.stringify(obj),'*');
    }

</script>

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息

message：为要发送的消息；
targetOrigin：用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 “*”。

2. 子页面

2.1. 修改子.jsp

接收index.jsp中传递的参数，调用子页面登录函数

window.onmessage = function (e) {
    portalLoginaa(e.data)
}

window.onmessage = function(e){ }

参数e为message实例

子登录函数

function portalLoginaa(objStr) {
    var password = JSON.parse(objStr).pass
    var loginName = JSON.parse(objStr).name      

password=strEnc(password,$("#random").val(),"","");      

loginName=strEnc(loginName,$("#random").val(),"","");
    $("#password").val(password);
    $("#loginName").val(loginName);
    document.forms['Login'].IDToken1.value = LoginForm.loginName.value;
    document.forms['Login'].IDToken2.value = LoginForm.password.value;
    $("#loginName").val("");
    document.forms['Login'].submit();
}