首页 > 其他分享 >关于iframe

关于iframe

时间:2022-10-01 01:33:06浏览次数:48  
标签:child location window 关于 iframe 跳转 页面

关于iframe的一些事情

一 iframe简介

iframe是一个行内标签,在一个页面中使用iframe标签,通过src可以链接到其他页面。当前页面也可通过设置 X-Frame-Options:'sameorigin',只允许同源访问。

二 iframe通信

1.同源通信

通过在父页面中中获取iframe页面的window,通过window去调用子页面的全局函数实现 父向子传值;

  /*父页面*/
  <iframe id='child' scr='*'></iframe>
  <script>
    const child = document.querySelector('#child');
    child.contentWindow.on(x);
  </script>
  /*子页面*/
  <script>
    function on(message){
      console.log(message);
    };
  </script>

2.非同源通信

父页面通过iframeDom.postMessage 来发送数据, 子页面通过window.onmessage 来监听发送过来的数据

  /*父页面*/
  <iframe id='child' scr='*'></iframe>
  <script>
    const child = document.querySelector('#child');
    child.postMessage(x,y); // x 表示传递数据,y表示url,可以设置为'*'
  </script>
  /*子页面*/
  <script>
    const fn = (e)=>{
      console.log(e.data);
    };
    window.addEventLisener= ('message',fn)
  </script>

二 关于页面的跳转

a标签的target属性

_self: 在当前tab中进行跳转;// 如果iframe子页面中使用这个属性,会在iframe中进行跳转;
_blank: 新开一个tab进行跳转 // iframe子页面中,和父页面表现一致
_parent: 在iframe中生效,表示在当前iframe页面外一层的父页面中进行跳转,可以外层的一个iframe,也可以是最外层主页面
_top: 在iframe中生效,表示当前iframe最外层的主页面中进行跳转

location.href 进行跳转

location.href: 在当前页面进行跳转;// 如果在iframe的子页面中进行使用,会在当前iframe内部进行跳转页面;
window.parent.location.herf: 在iframe子页面中使用,表示在父页面中跳转
window.top.location.href: 在iframe子页面中使用,表示在顶层页面中跳转
window.open('*'); // 新开一个tab页跳转

三 利用iframe进行跨域

四 利用iframe进行前端打印

五 微前端

标签:child,location,window,关于,iframe,跳转,页面
From: https://www.cnblogs.com/honkerzh/p/16746632.html

相关文章

  • 痞子衡嵌入式:一个关于Segger J-Flash在Micron Flash固定区域下载校验失败的故事(SR寄
    大家好,我是痞子衡,是正经搞技术的痞子。今天痞子衡给大家讲的是一个关于SeggerJ-Flash在MicronFlash固定区域下载校验失败的故事。痞子衡最近在支持一个i.MXRT......
  • 关于 FOR ALL ENTRIES IN 去重
    货铺QQ群号:834508274下面开始干货:做运维的时候,发现一个问题。只有特定情况下出现了错误。debug的时候发现是一条SQL语句取数没取全。原因就是使用了FORALLENTRIESIN。直......
  • 关于6000与6666端口无法访问
    背景:初玩docker的时候,把一个端口映射到6666,但无法访问,排查几次,Dockerfile和启动脚本应该没有问题。换了一个端口,比如6677,8080竟然就好了。说明应该是端口的问题,报错......
  • 《程序员的修炼之道:从小工到专家》阅读笔记其二(关于重复)
    第二章名为注重实效的途径,本章节通过大量篇幅从以下几个方面来诠释了途径。既然注重实效,那么肯定要减少繁琐的代码,于是,作者从重复这一方面入手。从程序维护入手,引......
  • 关于对象存储服务OBS,你真的了解么?
    自2015年提出“互联网+”以来,互联网信息技术对于企业发展的帮助作用越来越大,众多企业通过借助网络信息技术实现利润增值,企业对于网络信息数据也越来越依赖。 但网络信息数......
  • 产品的帮助中心怎么建设?关于编辑帮助文档的几个小技巧~
    随着互联网的发展,各种工具的入门门槛越来越低,现在在B站上,几乎所有的工具都能找到视频教学工具,而且质量都很好。当然,如果你愿意花钱买知识,可以在淘宝上找到更好的课程,而且大......
  • 关于css方面的回顾学习
    在css中有几个常用的单位:px、em、%这三个单位都是相对的单位。px:像素值,这个是相对于显示屏分辨率而言的。em:就是给字体设置font-size值的,如果元素的font-size为14px,那么1em......
  • 关于企业网络架构,你必须要了解这些......
    企业网络的架构的基本介绍?随着网络的逐步普及,企业不仅仅需要知道公司组织结构是什么,还必须了解企业网络架构是什么?一套成熟的网络架构可以保证系统的稳定性、安全性、可......
  • 关于手机端H5通知已读未读的一个简单demo
    情景:系统发通知给每一个员工,每个员工有一个系统系统,点击提示,通知列表有已读和未读主要通过redis来实现,大致思路:将通知和员工绑定作为key,如果员工点进链接证明已读则将key......
  • 关于软件开发转数据开发的困惑,自己是否该转型呢?
    干嘛要转型?转型是A变成B,为什么不是A+B?即做软件开发也做数据开发!!!!跨界型复合型人才才最吃香!!!!软件开发水平90%的专长或数据开发水平90%的专长敌不过这二者水平都是80%的人,而事......