首页 > 其他分享 >iframe 使用以及互相传值

iframe 使用以及互相传值

时间:2024-07-11 09:31:02浏览次数:16  
标签:互相 value id window iframe data event 传值

<div class="aiWrite">
        <iframe
          v-if="aiWriteShow"
          ref="iframeRef"
          style="width: 100%; min-height: calc(100vh - 216px)"
          name="iframePage"
          :src="iframeUrl"
          frameborder="0"
          scrolling="no"
        ></iframe>
      </div>
  iframeUrl.value = `${window.origin}/kb-web/aiWrite/aiwriteTempIframe?id=${templateId.value}`; 

可以通过url 传值到内嵌页面中

 

内嵌页面向外传值:

 window.parent.postMessage(
        { manuscriptBody: JSON.stringify(formData.manuscriptBody), id:  response.data.data.id }, '*'
);            

拿到数据后向外传值

外部接收:

const dataVal = ref()
onMounted(() => {
  window.addEventListener('message', event => {
    if (event.source === iframeRef.value.contentWindow) {
      dataVal.value = event.data;
    }
  });
});

 

标签:互相,value,id,window,iframe,data,event,传值
From: https://www.cnblogs.com/zjz666/p/18295403

相关文章

  • next.js 利用中间件(middleware.ts)实现PC与移动互相丝滑跳转
    场景描述产品要求开发一个落地页,为了美观,他要求这个两个页面分开设计,PC页面路由是`/landingpage`,移动端页面是`/landingpage/mobile`从用户角度出发,现在有一种访问场景,假如用户A正在访问PC页面`/landingpage`,然后他要把这个页面以微信方式分享给用户B,用户通过手机方式打开,那这个......
  • torch.tensor、numpy.array、list三者之间互相转换
    torch.tensor、numpy.array、list三者之间互相转换1.1list转numpyndarray=np.array(list)1.2numpy转listlist=ndarray.tolist()2.1list转torch.Tensortensor=torch.Tensor(list)2.2torch.Tensor转list先转numpy,后转listlist=tensor.numpy().tolist(......
  • vue3 父组件【属性】传值给子组件【props】接收
     父组件文件:parentcomponent.vue子组件文件:childcomponent.vue传普通值传动态值传对象传数组<!--父组件--><template>   <h1>IamParentComponent</h1>   <ChildComponentmsg="nice"/>  </template><scriptsetup>   importC......
  • 关于iframe标签用法
    iframe是啥?概念:  iframe是HTML的一个标签,用于在网页中嵌入另一个HTML文档。通俗来讲就是你自己的html页面里面可以随便拿一块空间嵌套别的网页。你们看到这个页面两侧的广告(google广告)。下面是我自己在自己页面嵌套的youtube视频~ 代码:效果 iframe的属性:sr......
  • selenium04_iframe切换
    1.用iframe的id属性切换到iframe:driver.switch_to.frame("id的值")2.用iframe的name属性切换到iframe:driver.switch_to.frame("name的值")3.iframe没有id和name属性,把iframe当作一个对象,用标签去定位全部iframe,然后用下标取某个iframe,再去切换frame=driver.find_elements_by_t......
  • 不实用iframe,CSS媒体查询依旧生效
    这段SCSS代码定义了用于处理响应式设计和媒体查询的功能和混合器。以下是对这段代码的逐行解释:```scss$mediaMinWidth:1024px;```定义了一个变量`$mediaMinWidth`,其值为1024像素。```scss@functiontranslate-media-condition($c){$condMap:("screen":"......
  • Camstar界面传值
    privatevoidPopupPage(stringPageName,boolissendparam=false){Camstar.WebPortal.Personalization.FloatPageOpenActionobjAction=newFloatPageOpenAction();objAction.PageName=PageName;if(issendparam){objAction.DataContractMap=newUIComponentD......
  • 在React项目中使用iframe嵌入一个网站
    在React项目中使用iframe嵌入一个网站非常简单。以下是如何在页面中嵌入百度网站的步骤:1.创建一个新的组件用于嵌入iframe首先,在src/components文件夹中创建一个新的文件Baidu.js。在Baidu.js文件中,编写如下代码://src/components/Baidu.jsimportReactfrom'react'......
  • springboot项目中使用iframe引入页面
    很多朋友想在spring-boot项目(包含:Security)中引用iframe,但是都不能正常运行,会报错localhost已拒绝连接:这是因为这个框架的安全性考虑:默认情况下,现代的Web浏览器会应用一些安全策略,例如同源策略,限制从一个源加载的内容如何与来自另一个源的内容进行交互。如果你尝试从一个不......
  • python爬虫之iframe处理+动作链
    python爬虫之iframe处理+动作链selenium处理iframe1、如果定位的标签存在于iframe标签之中,则必须使用switch_to.frame(id)2、动作链(拖动):fromselenium.webdriverimportActionChains(1)实例化一个动作链对象:action=ActionChains(bro)(2)click_and_hold(div):长按且点击操......