百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

填坑:frame和iframe 你所不知道的!

yuyutoo 2024-10-24 17:48 6 浏览 0 评论

frame和iframe的详解

1. frame不能脱离frameSet单独使用,iframe可以独立使用;

2.不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用

如果将iframe放在frameset中时必须使用body标签包裹frame标签,chorme下的测试结果是dom解构中没有framset标签;

body>frameset>iframe*3

否则,只有framset中的frame会显示在dom中,iframe不可以;

frameset>frame*3

3. frame高度只能通过frameSet控制,iframe可以自己控制;

<frameset cols="50%, 50%">

<frame src="frame1.html">

<frame src="frame2.html">

</frameset>

4. 从主页面访问

<iframe name = "test" id="iframe1"> ,前提是不违背跨域条件

var testWindow = window.test;//获得子框架的window

var testDocument = testWindow.document; //获得子框架的document

其他获得iframe window的几种方法

4.1

var frame1 = document.getElementById('iframe1');

console.log(frame1.contentWindow);

var doc = frame1.contentWindow.document;

4.2 window下一系列方法

window.frames['test']

window.frames[0] 是第一个iframe

window.test

top.frames['test']

top.frames[0];

frames[0]

frames['test'];

5. 从iframe访问外部框架

var parent = window.top;

var parent_doc = parent.document;

window.top指的是最顶部的window,

window.parent指的是包含此iframe的父元素的window,

当且仅当iframe的父元素有且仅有一个的时候,二者相等

6. 在自身的window下

self == window, 区分top.window.parent

在父框架和子页面域名不同的情况下,需要在自己的页面中嵌入对方域名的iframe,才能达到打通的效果;

相关推荐

网站建设:从新手到高手

现代化网站应用领域非常广泛,从个人形象网站展示、企业商业网站运作、到政府公益等服务网站,各行各业都需要网站建设。大体上可以归结四类:宣传型网站设计、产品型网站制作、电子商务型网站建设、定制型功能网站开...

JetBrains 推出全新 AI 编程工具 Junie,助力高效开发

JetBrains宣布推出名为Junie的全新AI编程工具。这款工具不仅能执行简单的代码生成与检查任务,还能应对编写测试、验证结果等复杂项目,为开发者提供全方位支持。根据SWEBench...

AI也能写代码!代码生成、代码补全、注释生成、代码翻译轻松搞定

清华GLM技术团队打造的多语言代码生成模型CodeGeeX近期更新了新的开源版本「CodeGeeX2-6B」。CodeGeeX2是多语言代码生成模型CodeGeeX的第二代模型,不同于一代CodeG...

一键生成前后端代码,一个36k星的企业级低代码平台

「企业级低代码平台」前后端分离架构SpringBoot2.x,SpringCloud,AntDesign&Vue,Mybatis,Shiro,JWT。强大的代码生成器让前后端代码一键生成,无需写任...

Gitee 代码托管实战指南:5 步完成本地项目云端同步(附避坑要点)

核心流程拆解:远程仓库的搭建登录Gitee官网(注册账号比较简单,大家自行操作),点击“新建仓库”,建议勾选“初始化仓库”和“设置模板文件”(如.gitignore),避免上传临时文件。...

jeecg-boot 源码项目-强烈推荐使用

JEECGBOOT低代码开发平台...

JetBrains推出全新AI编程工具Junie,强调以开发者为中心

IT之家2月1日消息,JetBrains发文,宣布推出一款名为Junie的全新AI编程工具,官方声称这款AI工具既能执行简单的代码生成与检查等基础任务,也能应对“编写测试、验证结...

JetBrains旗下WebStorm和Rider现已加入“非商用免费”阵营

IT之家10月25日消息,软件开发商JetBrains今日宣布,旗下WebStorm(JavaScript开发工具)和Rider(.NET开发工具)现已加入“非商用免费”阵营。如果...

谈谈websocket跨域

了解websocketwebsocket是HTML5的新特性,在客户端和服务端提供了一个基于TCP连接的双向通道。...

websocket调试工具

...

利用webSocket实现消息的实时推送

1.什么是webSocketwebSocket实现实现推送消息WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。以前的推送技术使用Ajax轮询,浏览器需...

Flutter UI自动化测试技术方案选型与探索

...

为 Go 开发的 WebSocket 库

#记录我的2024#...

「Java基础」Springboot+Websocket的实现后端数据实时推送

这篇文章主要就是实现这个功能,只演示一个基本的案例。使用的是websocket技术。...

【Spring Boot】WebSocket 的 6 种集成方式

介绍...

取消回复欢迎 发表评论: