O projeto vue usa páginas pai-filho iframe para passar valores.


1. O projeto vue chama o método na subpágina iframe.

1. Página pai

A chave para chamar o método subpage é obter os atributos iframedo objeto elementocontentWindow
this.$refs.iframeName.contentWindow.FunctionName()

<template>
  <div class="pjpccx">
    <h1 class="title_color">{
    
    {
    
     title }}</h1>
    <button @click="reportPrint">点击调用iframe中的方法</button>
    <iframe ref="iframe" src="/static/zkjs/base.html" width="100%" height="100%" style="border: none;" class="iframe" frameborder="0" scrolling="yes" name="iframe" seamless>您的浏览器版本过低,无法显示报表内容!建议升级浏览器或更换浏览器!</iframe>
  </div>
</template>

export default {
    
    
	methods: {
    
    
    reportPrint() {
    
    
      // 父页面调用子页面方法
      this.$refs.iframe.contentWindow.openThePage()
      // 父页面向子页面传值
      this.$refs.iframe.contentWindow.postMessage(param)
    }
  }
}

2. Subpágina

  <script type="text/javascript">
    // 打开某一页
    function openThePage() {
    
    
      new Device().startFun()
    }
    // 子页面接受父页面的传值
    window.addEventListener('message', messageEvent => {
    
    
      if (messageEvent.source != window.parent.window.parent) return;
      paramData = messageEvent.data
      changeUrl(paramData)
    })
  </script>

2. Na página iframe, chame o método na página pai que faz referência a ela.

1. Página pai

A página pai só precisa adicionar events 监听器e a execução no retorno de chamada requer a execução de métodos ou o uso de parâmetros.

  mounted() {
    
    
    let _this = this
    // 父页面接受子页面的传值
    window.addEventListener('message', function (e) {
    
    
      console.log(e) //{data:'params'}
      console.log(e.data.Name||e.data.result.Name)
      _this.form.name = e.data.Name||e.data.result.Name
    })
  },

2. Subpágina

window.parent.postMessageComunicação implementada por subpáginas através de métodos

function setCertificateData(result) {
    
    
  // 子页面传值给父页面
  window.parent.postMessage({
    
    
    data: "params",
  }, '*');
  // 子页面传值给指定父页面
  window.parent.postMessage(result.Certificate, 'http://localhost:8080/#/formVue');
  window.parent.postMessage({
    
    result: result.Certificate}, 'http://localhost:8080/#/formVue');
 }

Acho que você gosta

Origin blog.csdn.net/weixin_45665171/article/details/132969278
Recomendado
Clasificación