关于使用iframe的一些心得

最新推荐文章于 2025-03-07 15:55:04 发布
原创 最新推荐文章于 2025-03-07 15:55:04 发布 · 445 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文介绍了JavaScript中父页面与子iframe页面之间的元素获取及方法调用技巧，包括如何通过window.frames和window.parent等属性实现跨iframe的数据交互。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. 从父页面获取子页面元素时，如果iframe没有ID值，只有name值，可以这样操作：window.frames['iframe_name'].document.getElementById('要查询的元素id值').value;
  2. js在iframe子页面获取父页面元素代码如下:   window.parent.document.getElementById("元素id");
  3. js在父页面获取iframe子页面元素代码如下(有id情况下): window.frames["iframe_ID"].document.getElementById("元素id");                                          
  4. 父页面调用子页面方法：  FrameName.window.childMethod();
  5. 子页面调用父页面方法：  parent.window.parentMethod();

(原创)springboot+springsecurity+redis+jwt+vue+iframe 做一个前后端分离的SSO单点登陆鉴权系统 类似淘宝天猫单点登陆
xuexishaguo的博客
12-20 3万+
1 前言 单点登陆系统，简单说就是用户登陆了www.aaa.com之后，再登陆www.bbb.com，就不需要重新输入用户名密码进行登陆，中间会有一个www.sso.com的验证中心。这点类似于淘宝 ，天猫，当然淘宝的验证中心域名是login.taobao.com，和www.taobao.com是同一个域名。要做到无缝登陆，就需要iframe这个技术，淘宝天猫也是用的iframe，iframe还...
iframe使用心得
进击的莱鸟
03-30 200
<iframe>是框架的一种形式，也比较常用到。例子1。<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>width插入页的宽；height插入页的高；scrolling 是否显示页面滚动条（可选的参数为 auto、yes、no，如果省略这个参数，则默认为auto...
iframe学习总结
bcbobo21cn的专栏
07-01 888
iframe标签用法详解(属性、透明、自适应高度) iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容，为了更好的 效果，可能需要使iframe透明效果，那么就需要了解更多的iframe属性，这里简单的整理下， 1、iframe 定义和用法  iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。  H
react 中使用iframe
wyd的博客
07-03 2万+
render(){ // console.log(this.props.lid) return( <div style={{width:"100%",height:"100%"}}> <div style={{height:"95%"}}> <div ...
【亲测免费】 在React中优雅地利用iFrame：React `<Frame />`组件
gitblog_00065的博客
05-13 1395
在React中优雅地利用iFrame：React <Frame />组件 如果你在开发Web应用时遇到过跨域或独立渲染组件的挑战，那么这个开源项目会对你产生极大的吸引力。React <Frame />组件 是一个强大的工具，它允许你在iFrame内封装你的整个React应用或者单个组件。接下来，让我们深入了解一下这个项目及其技术特性。 1. 项目介绍 react-frame...
clearbox使用心得
07-31
下面将详细探讨ClearBox的使用心得和相关知识点。 1. **基础概念**： - **弹出窗口**：ClearBox可以创建一种浮动在网页上的窗口，用户点击链接后，图片、视频或其他内容会在这个窗口中显示，不会中断用户的浏览...
iframe高度自适应及隐藏滚动条的实例详解
01-21
而这种情况下，我们一般都会选择去使用iframe达到我们的目的。但是iframe用起来，真的是让人头痛，高度无法控制，难看的滚动条等等，下面我分享一下自己在处理iframe时的一些心得。 高度自适应 <iframe src=...
HTML代码优化方法总结和使用心得(1).doc
最新发布
06-23
1. 使用相对URL：在页面中的各种URL（如链接、外链CSS的href、外链JavaScript的src、图片src、iframe src等）上，如果能够确定它们与当前页面位于同一域名下，采用相对路径而非绝对路径。这样可以节省至少一个域名的...
DevExpress 使用心得
10-16
在本篇文章中，我们将讨论 DevExpress 的一些使用心得，包括 TreeList、AspxButton 等控件的使用方法和技巧。 一、AspxButton 客户端验证 在使用 AspxButton 控件时，我们可能需要在客户端验证用户输入的数据，以...
JavaScript框架(iframe)操作总结
10-26
在iframe的使用场景中，经常需要改变iframe中内容的URL，这时候可以使用window.location属性。这个属性既可以获取当前iframe的URL，也可以设置新的URL从而实现页面跳转。例如，若想将页面中第一个iframe的内容跳转到...
iframe-auth-example:iFrame 身份验证示例应用程序
05-30
iframe-auth-example iFrame 身份验证示例应用程序 入门 git clone https://github.com/RocketChat/iframe-auth-example.git cd iframe-auth-example npm install npm start
Vue项目通过内嵌iframe访问另一个vue页面，获取token适配后端鉴权(以内嵌若依项目举例)
Jiang_bug的博客
03-07 1244
Vue项目通过内嵌iframe访问另一个vue页面，获取token适配后端鉴权(以内嵌若依项目举例)
react项目通过iframe方式引入html页面
热门推荐
qq_38519358的博客
09-09 2万+
项目中会碰到在react项目中引入html静态页面的需求，以下是解决方法： 主要实现：通过<iframe>方式引入，以下是核心代码部分： import data from './data.html'; // 引入需要引用的html文件 class Data extends Component { render() { return ( <ifra...
使用iframe后 用户体验感大幅度提升
weixin_34192816的博客
10-19 162
2019独角兽企业重金招聘Python工程师标准>>> ...
深入理解iframe
skysys的研究小屋
07-11 751
本文并不是一篇iframe API文档讲解，因此想了解iframe API的同学请移步 MDN， 我将在现在浏览器的角度与大家去探讨iframe, 因此，本文中虽然会提及一些iframe在旧浏览器中的应用， 但并不会去讲解。 所以，您对iframe在旧浏览器中的应用场景感兴趣的话，还请自己搜索相关资料。 同时， 我也会从浅入深的来与大家探讨iframe中的一些特性、各种现代浏览器中的渲染模式、应用场景、以及在现代开发中的影响。 什么是iframe 在HTML中有三种结构特征：树结构、层次结构、框结构。ifr
记录react项目中引入iframe通信问题以及请求多次问题
m0_53197203的博客
03-12 1018
之前想在iframe加载之前实现一个loading，实现方式是使用useRef钩住iframe元素，在当前的current.onload中去改变了loading的状态，这样会使iframe页面刷新2次甚至3次，意味着会多次请求接口，并且可能造成通过postMessage传递的数据丢失。添加判断，如果有source这个来源就说明不是用户发来的提交信息，而是iframe打开的常规消息。页面中点击按钮会打开一个遮罩层，遮罩层中会通过iframe嵌入另一个域名的网站，呈现问卷调查表。
解决iframe嵌套第三方网页，导致鉴权失败无法登录的问题
老衲的少女心i~
05-23 2万+
目录前言一、iframe是什么？二、401 (Unauthorized)三、解决总结 前言 最近遇到的一个问题，老项目的第三方以iframe嵌入的网页，无法正常登录了。 定位问题，发现： 控制台报错401 (Unauthorized)，导致的无法正常登录。是因为我们iframe的问题，产生了跨域，导致我们的cookie无法共享。 提示：以下是本篇文章正文内容，下面案例可供参考 一、iframe是什么？ HTML 内联框架元素 (< iframe >) 表示嵌套的browsing contex
解决iframe标签嵌入一个现有的网站无法登录的问题
cmhahaha的博客
01-25 6721
以iframe标签嵌入一个现有的网站到项目中，嵌入的网站无法正常登录，直接在浏览器地址栏输入url并登录是正常的。于是开始探索… 问题分析 由于后续接口提示401，判断是登录接口鉴权失败导致的，于是观察登录接口的请求响应，发现了端倪： 翻译为大白话就是：写入Cookie失败。原因是没有显式设置cookie的samesite属性，导致被默认为Lax，又因为响应的接口属于非顶层导航的跨站请求，浏览器将其屏蔽了！ 这个提示包含了两个信息： 设置cookie时有个连带的SameSite属性 top-level-na
我的旅行计划——HTML标签使用心得
HTML5允许使用`<iframe>`标签嵌入其他网页，而`<video>`标签用于嵌入视频内容，`<audio>`标签用于嵌入音频内容，`<map>`和`<img>`标签结合使用可以嵌入互动地图等。这些元素对于创建动态和互动的网页内容至关重要。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值