在网页开发中，我们经常会使用iframe标签来嵌入其他网页或者文档。而iframe传值则是指在嵌入的iframe中传递参数的一种技术。通过传递参数，我们可以在嵌入的iframe中获取到父页面传递过来的数据，从而实现不同页面之间的数据交互。
方法一 使用URL参数传递
最简单的一种方式是使用URL参数传递。在父页面中，我们可以通过修改iframe的src属性来传递参数。例如：
<iframe src="child.html?param1=value1¶m2=value2"></iframe>
在子页面中，我们可以通过JavaScript获取到URL参数，并进行相应的处理。例如：
getLocationSrcUrl() {
console.log(" window.location.href ", window.location.href)
let flag = window.location.href.indexOf("?")
if (flag > 0) {
var params = window.location.search.substring(1).split("&")
var paramObj = {}
for (var i = 0; i < params.length; i++) {
let item = decodeURIComponent(params[i])
var pair = item.split("=")
paramObj[pair[0]] = decodeURIComponent(pair[1])
}
console.log("paramObj ", paramObj)
return paramObj
}
}
// 通过以上代码，我们可以将URL参数解析为一个对象paramObj，然后就可以根据参数的名称来获取对应的值了。
方法二 使用postMessage方法传递
postMessage方法是HTML5中提供的一种跨文档通信的方式，可以在不同的窗口或者iframe之间传递数据。
在父页面中，我们可以通过以下代码向子页面发送消息：
var iframe = document.getElementById("myIframe");iframe.contentWindow.postMessage("Hello", "http://child.com");
在子页面中，我们可以通过监听message事件来接收消息，并进行相应的处理：
window.addEventListener("message", functiоn(event) {
if (event.origin === "http://parent.com") {
var data = event.data;
// 处理接收到的数据
}
});
方法三 使用localStorage或sessionStorage传递
在父页面中，我们可以将数据存储到localStorage或sessionStorage中：
localStorage.setItem("param1", "value1");sessionStorage.setItem("param2", "value2");
在子页面中，我们可以通过以下代码来获取存储的数据：
var param1 = localStorage.getItem("param1");var param2 = sessionStorage.getItem("param2");
通过以上代码，我们可以在父页面和子页面之间进行数据的存储和获取。 注意，由于安全原因，不同域的页面之间无法共享 sessionStorage，因此只有在同源的页面之间才能使用此方法进行操作。如果需要与不同域的页面进行交互，可以考虑使用其他方式，例如使用 postMessage 发送消息或使用 WebSocket 进行通信。
##总结## 通过以上的方法，我们可以实现在iframe中传递参数的功能。无论是使用URL参数、postMessage方法还是localStorage或sessionStorage，都可以根据实际需求选择合适的方式来进行数据传递。
在使用iframe传值时，需要注意安全性和兼容性的问题。尽量避免传递敏感信息，同时也要考虑不同浏览器的兼容性。
tms 嵌套wms-iframe子页面跳转交互方式
* wms--跳转 tms 采用 postMessage 方法(window.parent.postMessage({...data}, ""))传递参数 ** wms 需要--携带参数跳转的页面：
// utils/index.js
/**
* 跳转父系统菜单
* @param {Object} payloadObj
* 参数对象 { routerName: "", params: {}, url: "" }
* @ routerName 路由名称 {String} 必传
* @ params 路由参数
* @ url 路由地址 {String} 必传
*/
export function jumpsToParentSystemMenu(payloadObj) {
let payload = { routerName: "", params: {}, url: "" }
let origin = window.location.origin + "/wmsweb/index.html#"
payload.url = origin + payloadObj.url
payload.params = Object.assign({}, payloadObj.params)
payload.routerName = payloadObj.routerName || ""
payload.params = Object.assign({}, payloadObj.params)
// 要传递的数据
const data = {
sourceSystem: "wmsIframePage", // 标记 来自哪个系统
...payload
}
window.parent.postMessage(data, "*") // *表示接收任意源的消息
}
import { getTmsToWmsMsgSessionStorage, jumpsToParentSystemMenu } from "@/utils/index"
if (process.env.NODE_ENV === "production") {
jumpsToParentSystemMenu(pathObj)
} else {
this.$router.push({
path: path,
query: query
})
}
tms 中 App.vue 或 Home.vue, created 或mounted 生命周期 监听 wms postMessage 消息： tms 采用在Home.vue mounted 中监听 wms 页面发送过来的 postMessage 消息, 拿到消息参数调用 Home 页面跳转路由的方法； tms 还要携带消息参数，传递给 wms 页面；采用 store 管理 sessionStorage 存储消息参数（因为不止1个页面携带参数跳转）；wms的iframe子页面 通过 window.parent.sessionStorage 读取操作
----store/index.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
state: {
tmsToWmsMessage: {
from: "tms",
wmsMessageArr: []
} // tms 监听 wms postMessage 消息 存sessionStorage
},
getters: {
// 返回wms 路由信息数组
getTmsToWmsMessageArr(state) {
let localWmsMsg = sessionStorage.getItem("tmsToWmsMessage") ? JSON.parse(sessionStorage.getItem("tmsToWmsMessage")) : null
if (localWmsMsg) {
if (localWmsMsg.from === "wms") {
return state.tmsToWmsMessage.wmsMessageArr
}
} else {
return []
}
}
},
actions: {},
mutations: {
/**
* 设置 wms 路由信息数组
* @param {*} state
* @param {Object} payload window.addEventListener("message") 监听到的信息
* 考虑页面会重复进入，通过 路由routerName 做唯一判断，避免存重复数据
*/
setTmsToWmsMessageArr(state, payload) {
// console.log("触发 store setTmsToWmsMessageArr ", payload)
if (!payload) return console.error("store/index.js: setTmsToWmsMessageArr 请传入payload")
let localWmsMsg = sessionStorage.getItem("tmsToWmsMessage") ? JSON.parse(sessionStorage.getItem("tmsToWmsMessage")) : null
let wmsMessageArr = []
// 第二次进来本地有--并且不是重复的添加进去
if (localWmsMsg) {
if (localWmsMsg.from == "tms") {
wmsMessageArr = localWmsMsg.wmsMessageArr || []
// 检测是否有重复路由信息
let findIndx = wmsMessageArr.findIndex((item) => item.routerName === payload.routerName)
if (findIndx > -1) {
// 有重复的
wmsMessageArr[findIndx] = payload
} else {
wmsMessageArr.push(payload)
}
state.tmsToWmsMessage.wmsMessageArr = wmsMessageArr
sessionStorage.setItem("tmsToWmsMessage", JSON.stringify(state.tmsToWmsMessage))
}
} else {
// 第一次进来没有--有监听到 payload
if (payload) {
wmsMessageArr.push(payload)
state.tmsToWmsMessage.wmsMessageArr = wmsMessageArr
sessionStorage.setItem("tmsToWmsMessage", JSON.stringify(state.tmsToWmsMessage))
}
}
}
}
})
---Home.vue
mounted() {
// 通过iframe嵌入的页面跳转
window.handlerJump = this.handlerJump
// 监听wms系统postMessage
window.addEventListener("message", (event) => {
const receivedData = event.data // 接收到的数据
console.log("Home.vue ", receivedData) // 输出接收到的数据
if (receivedData.sourceSystem == "wmsIframePage") {
// 组装要跳转的页面路由和参数
// let payload = {
// id: "", // 路由params.id
// url: "", // 要跳转的页面 name 或 url
// params: {}
// field: "" // multiplePayload 路由params 多个参数 传对象
// }
let payload = {
sourceSystem: receivedData.sourceSystem,
url: receivedData.url,
routerName: receivedData.routerName,
params: receivedData.params
}
// payload.field = "" // 单个参数
payload.multiplePayload = JSON.stringify(receivedData.params) // 多个参数
// 设置 tms 监听 wms postMessage 消息 存sessionStorage
this.$store.commit("setTmsToWmsMessageArr", payload)
// 跳转页面
this.handlerJump(payload)
}
})
},
methods: {
// 跳转菜单的方法
handlerJump(payload)
}
wms的iframe子页面 获取 tms sessionStorage 中的数据, 注意在需要的页面使用，页面销毁或跳出时 清空指定的sessionStorage
---utils/index.js 封装 存取公共方法
/**
* 获取 tms存sessionStorage 跳转路由信息
* @params key {String} 存入sessionStorage的key
* @params uniqueRouteName {String} 存入sessionStorage的路由名称
* @return 若传递 uniqueRouteName 返回匹配到的 信息 若不传 返回所有的
* 格式示例：
*{
*"from": "tms",// sessionStorage 存入的来源
*"wmsMessageArr":
* [
* {
* "source": "wmsIframePage",
* "url": "",
* "routerName": "",
* "multiplePayload": "{}"
* }
* ]
*}
export function getTmsToWmsMsgSessionStorage(key, uniqueRouteName) {
// 获取 tms存sessionStorage 跳转路由信息
if (typeof key !== "string") return console.error("Required string type")
let routeInfo = sessionStorage.getItem(key) ? JSON.parse(sessionStorage.getItem(key)) : null
let filterItem = {} // 过滤匹配的 uniqueRouteName 项
let itemArr = [] // 需要遍历的 tms 存sessionStorage wmsMessageArr 路由数组信息
if (routeInfo) {
if (routeInfo.from === "tms") {
if (uniqueRouteName) {
// 如果传需要匹配路由 返回匹配到的信息
itemArr = routeInfo.wmsMessageArr || []
if (itemArr.length > 0) {
filterItem = itemArr.find((item) => {
if (item.routerName === uniqueRouteName) {
item.multiplePayload = item.multiplePayload ? JSON.parse(item.multiplePayload) : {}
return item
}
})
// 找不到返回undefined
return filterItem
}
} else {
// 返回 tms存sessionStorage 所有跳转路由信息
return routeInfo
}
} else {
return null
}
} else {
return null
}
}
/*
*
* 删除 tms存sessionStorage 指定跳转路由信息
*（返回或退出 需要清空本地当前页面 sessionStorage 查询条件时 调用）
* @params key {String} 存入sessionStorage的key
* @params uniqueRouteName {String} 存入sessionStorage的路由名称
* @return 若传递 uniqueRouteName 返回匹配到的 信息 若不传 返回所有的
*/
export function delTmsToWmsMsgSessionStorageItem(key, uniqueRouteName) {
if (!uniqueRouteName) return console.error("Required string routerName")
let storageItem = sessionStorage.getItem(key) ? JSON.parse(sessionStorage.getItem(key)) : null
let itemArr = [] // 需要遍历的 tms 存sessionStorage wmsMessageArr 路由数组信息
let filterIndex = null
if (storageItem) {
if (storageItem.from === "tms") {
itemArr = storageItem.wmsMessageArr || []
if (itemArr.length > 0) {
// 清除本地缓存 指定路由
filterIndex = itemArr.findIndex((item) => item.routerName === uniqueRouteName)
if (filterIndex > -1) {
itemArr.splice(filterIndex, 1)
}
sessionStorage.setItem(key, JSON.stringify({ from: "tms", wmsMessageArr: itemArr }))
}
// 对比 sessionStorage 和 window.parent.sessionStorage 存取参数
console.log("wms sessionStorage --", sessionStorage.getItem(key))
console.log("window.parent.sessionStorage ", window.parent.sessionStorage.getItem(key))
}
}
}
---- xx.vue 使用的页面
import { getTmsToWmsMsgSessionStorage, delTmsToWmsMsgSessionStorageItem } from "@/utils/index"
created(){
// 读取 tms 指定页面 sessionStorage 数据
let tmsToWmsMessageItem = getTmsToWmsMsgSessionStorage("tmsToWmsMessage", "StockInOrderList")
console.log("StockInOrderList sessionStorage ", tmsToWmsMessageItem)
console.log("StockInOrderList window.parent.sessionStorage ", window.parent.sessionStorage.getItem("tmsToWmsMessage"))
},
beforeDestroy(){
this.deTmsToWmsMsgItem()
},
methods: {
// 页面销毁前删除本地指定缓存
deTmsToWmsMsgItem() {
let tmsToWmsMessageItem = getTmsToWmsMsgSessionStorage("tmsToWmsMessage", "StockInOrderList")
if (tmsToWmsMessageItem) {
delTmsToWmsMsgSessionStorageItem("tmsToWmsMessage", "StockInOrderList")
}
}
}
// 注意退出系统时 也要想着清除 sessionStorage 数据
参考地址 https://www.sparktry.com/2017/8104.html
