一、使用URL传递参数
在使用iframe时,我们可以通过在URL中添加参数的方式传递数据。接收方可以通过解析URL获取参数,在展示页面中根据参数展示相关内容。
<iframe src="http://example.com/page.html?param1=value1¶m2=value2"></iframe>
在接收页面中,可以通过以下方式获取参数:
function getParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURIComponent(r[2]); //使用decodeURIComponent解码 return null; } var param1 = getParam("param1"); var param2 = getParam("param2");
二、使用postMessage传递参数
postMessage是HTML5引入的一种在不同窗口之间传递数据的机制。通过在发送方窗口中调用postMessage方法向接收方窗口发送数据,并在接收方窗口中监听message事件获取数据。
在发送方窗口中:
var targetWindow = document.getElementById("my-iframe").contentWindow; //获取目标window对象 var message = { param1: "value1", param2: "value2" }; //要传递的数据 targetWindow.postMessage(message, targetDomain); //向目标窗口发送数据
在接收方窗口中:
window.addEventListener("message", function(event) { if (event.origin !== targetDomain) return; //需要校验来源 var message = event.data; //获取数据 var param1 = message.param1; var param2 = message.param2; });
三、使用localStorage传递参数
localStorage是HTML5引入的本地存储机制,数据可以在不同窗口中共享。我们可以在发送方窗口中将数据存储到localStorage中,接收方窗口监听localStorage的变化,获取数据后将数据从localStorage中删除。
在发送方窗口中:
var message = { param1: "value1", param2: "value2" }; //要传递的数据 localStorage.setItem("message", JSON.stringify(message)); //存储数据
在接收方窗口中:
function getMessage() { var message = JSON.parse(localStorage.getItem("message")); //获取数据 localStorage.removeItem("message"); //删除数据 return message; } var message = getMessage(); var param1 = message.param1; var param2 = message.param2;
四、使用服务端API传递参数
如果数据量较大,不能通过URL或localStorage传递,我们可以通过服务端API传递数据。可以使用AJAX调用API获取数据,然后在展示页面中通过iframe展示相应内容。
在发送方页面中:
$.ajax({ type: "GET", url: "http://example.com/api", data: { param1: "value1", param2: "value2" }, success: function(response) { var content = response.content; //获取内容 $("#my-iframe").attr("srcdoc", content); //设置iframe内容 }, error: function() { alert("获取数据失败!"); } });
在接收方页面中,可以通过以下方式获取参数:
var param1 = getParam("param1"); var param2 = getParam("param2");
五、小结
我们可以使用多种方式给iframe传递参数并获取数据。根据实际需求和场景,选择合适的方式是很重要的。