iframe 与 h5 或 其他vue页面传值，详解传递参数的方法和技巧

在网页开发中，我们经常会使用iframe标签来嵌入其他网页或者文档。而iframe传值则是指在嵌入的iframe中传递参数的一种技术。通过传递参数，我们可以在嵌入的iframe中获取到父页面传递过来的数据，从而实现不同页面之间的数据交互。

方法一 使用URL参数传递

最简单的一种方式是使用URL参数传递。在父页面中，我们可以通过修改iframe的src属性来传递参数。例如：

<iframe src="child.html?param1=value1&param2=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