html页面能直接传递参数吗,html页面之间传递参数

方法:HTML5本地存储,即在A页面存储数据,然后在B页面获取

localStorage存储的数据,localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

http://www.w3school.com.cn/html5/html_5_webstorage.asp

//A页面

方法一:

// Check browser support

if (typeof(Storage) !== "undefined") {

// Store

localStorage.setItem("lastname", "Gates");

// Retrieve

document.getElementById("test").innerHTML = localStorage.getItem("lastname");

} else {

document.getElementById("test").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";

}

方法二:

localStorage['foo'] = 'newBar';

方法三:

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值

//B页面

方法一:

document.getElementById("a-test").innerHTML = localStorage.getItem("lastname");

方法二:

localStorage["foo"]

方法三:

console.log(sessionStorage.getItem('testKey')); // => 返回testKey对应的值); 关闭浏览器后再打开,数据会被删除,所以控制台输出的null,需要重新打开A页面,再刷新B页面,控制台输出这是一个测试的value值

输出结果:

console.log(localStorage.getItem("foo")); //newBar

console.log(localStorage["foo"]); //谷歌浏览器:newBar 360、IE浏览器:null

HTML中,父页面向iframe框架中的页面传递参数可以通过设置iframe的src属性或使用JavaScript来实现。以下是两种常见的方法: 1. 使用URL参数传递: 在父页面中,可以通过在iframe的src属性中加入查询字符串(query string)来传递参数。例如: ```html <iframe src="child_page.html?param1=value1&param2=value2" ...></iframe> ``` 在iframe框架中的child_page.html页面里,可以通过JavaScript来获取这些参数: ```javascript function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split('&'); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split('='); if (decodeURIComponent(pair[0]) == variable) { return decodeURIComponent(pair[1]); } } return null; } var param1 = getQueryVariable('param1'); // 获取param1的值 var param2 = getQueryVariable('param2'); // 获取param2的值 ``` 2. 使用JavaScript的window.postMessage方法: HTML5引入了window.postMessage方法,它提供了一种安全的方式来实现跨源通信,即允许一个页面和另一个“不同源”的页面进行通信。父页面和iframe页面可以约定一个事件监听和触发机制来传递参数。 父页面向iframe发送消息: ```javascript var iframe = document.getElementById('iframeId'); var iframeWindow = iframe.contentWindow; iframeWindow.postMessage({param1: 'value1', param2: 'value2'}, '*'); ``` iframe中的页面接收消息: ```javascript window.addEventListener('message', receiveMessage, false); function receiveMessage(event) { var data = event.data; if (data.param1) { console.log(data.param1); // 使用param1的值 } if (data.param2) { console.log(data.param2); // 使用param2的值 } } ``` 在使用postMessage时,必须确保接收和发送页面遵守相同的安全协议和端口,否则postMessage会失败。通常需要在iframe页面和父页面上都设置消息监听器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值