js-如何在两个页面之间互相传递数据?

页面之间传递数据我们常用到的两种方式:

  1. 把要传递的数据作为字符串拼接到要跳转的url后面,另一个页面直接读取本页面的url

这是封装好的两个函数,直接拿来调用就可以

//把参数拼接到url后面
function grow(obj,url) {
    var s = '';
    for(var k in obj){
        s += "&"+k+"="+obj[k];
    }
    var Str = s.substr(1);

    if(url.indexOf("?") > -1){
        url = url+"&"+Str;
    }else{
        url = url+"?"+Str;
    }
    return url;
}


//从url读取数据
function GetQueryString(name,url)
{
    url = url || window.location.search.substr(1);
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = url.match(reg);
    if(r!=null)return decodeURI(r[2]);
    return null;
}


    //点击跳转到b页面
    $("跳转按钮").on("click",function () {

        var name = $("name").val();
        var id = $("id").val();

        var currentCity = {
            cityid:id,
            cityName:name
         };

        var url = "b.html";
        window.open( grow(currentCity,url),"_self"); 

    });

    //b页面读取数据
    var cityId = GetQueryString("cityid","");
    var cityName = GetQueryString("cityName","");
  1. 把数据存储到cookie或者localStorage里面,这样在无论在哪个页面都可以读取到。
省略号,懒得写
### 不同源的 iframe 间的安全通信 为了实现不同源的 iframe 安全通信,`postMessage()` 方法提供了一种有效的方式。此方法允许一个窗口向另一个窗口发送消息,即使这两个窗口位于不同的源下也能正常工作[^3]。 当调用 `postMessage()` 发送信息时,会在目标窗口上触发 `message` 事件。接收方可以通过监听该事件来获取并处理入的数据。需要注意的是,尽管两个页面无法直接访问彼此的方法或属性,但它们能够通过这种方式交换信息而不违反同源策略的要求[^4]。 下面展示了一个简单的例子说明如何利用 JavaScript 实现跨域 iframe 的双向通讯: #### 父页面代码 ```javascript // 创建子iframe const childFrame = document.createElement('iframe'); childFrame.src = 'https://example.com/child.html'; document.body.appendChild(childFrame); // 接收来自子iframe的消息 window.addEventListener('message', function(event) { console.log(`收到消息: ${event.data}`); }); // 给子iframe发消息 function sendMessageToChild(message){ childFrame.contentWindow.postMessage(message, '*'); // '*'表示不限制目标源 } ``` #### 子iframe中的JavaScript代码 ```javascript // 监听父级来的内容 window.addEventListener('message', function(event) { console.log(`接收到的信息为:${event.data}`); // 只回应特定来源的消息 if (event.origin !== 'http://parent-domain.com') return; // 返回给父页面一些反馈 event.source.postMessage('已成功接收到您的消息!', event.origin); }); ``` 这种方法不仅解决了跨域问题,还提供了良好的安全性保障机制,比如可以设置白名单验证消息来源的有效性和合法性,从而防止潜在的安全威胁。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值