Iframe框架的各种操作,专治各种不服

2024-03-05 07:38

本文主要是介绍Iframe框架的各种操作,专治各种不服,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

脚本操作框架页面
测试环境IE6、IE9、火狐
JQUERY引用地址

一、IFRAME框架

页面示例

        <iframe id="ifr1"  frameborder="1" scrolling="no"   src="H16-1.htm" style="width: 45%; height: 
250px"></iframe> 
<iframe id="ifr2" frameborder="1" scrolling="no"   src="H16-2.htm" style="width: 45%; height: 
250px"></iframe>

父页面包含两个子框架 分别是 IFR1 IFR2

1父页面调用子页面

A、父页面获取IFR1框架内的文本框并且写入内容

        var obj = document.getElementById("ifr1").contentWindow;  
//JQUERY方法 
//$("#txt1",obj.document).val("父页面写入子页面" + Math.floor(Math.random()*1000)); 
//JAVASCRIPT方法 
obj.document.getElementById("txt1").value = "11父页面写入子页面" + 
Math.floor(Math.random()*1000);

B、父页面调用框架页面的函数AddMsg为IFR1框架内的

函数

        var obj = document.getElementById("ifr1").contentWindow;  
obj.AddMsg("父页面调用子页面函数写入信息" + Math.floor(Math.random()*1000));

C、父页面重写子框架链接


//重写子框架链接

        //JQUERY方法 
//$("#ifr1").attr("src",$("#ifr1").attr("src")); 
//JAVASCRIPT方法 
window.document.getElementById("ifr1").src = window.document.getElementById("ifr1").src;

D、使用[]方式获取框架对象

        //使用[]方式获取框架对象 
//JQUERY方法 
//$(window.frames["ifr1"].document).find("input[type='radio']").attr("checked","true"); 
//JAVASCRIPT方法 
window.frames["ifr1"].document.getElementById("txt1").value = "11这是父页面写入的内容";

2框架页操作父页面

A、获取父页面元素并且赋值

        //获取父页面元素  并且写入数据 
//JQUERY方法 
//$("#msg",parent.window.document).html("获取父页面元素并且写入数据" + 
Math.random()); 
//JAVASCRIPT方法 
parent.window.document.getElementById("msg").innerHTML = "11获取父页面元素并且写入
数据" + Math.random();

B、调用父页面函数

        //调用父页面函数  AddMsg---父页面函数 
parent.window.AddMsg("11调用父页面函数写入内容" + Math.random());

3兄弟框架互操作

A、获取兄弟框架元素并赋值

        //获取兄弟框架元素 并且写入数据  IFR2获取IFR1中的元素 
//JQUERY方法 
//$("#ifr1",parent.document).contents().find("#txt2").val("这是框架IFR2写入的" + 
Math.random()); 
//JAVASCRIPT方法 
parent.document.getElementById("ifr1").contentWindow.document.getElementById("txt2").value = "11这是框架IFR2写入的" + Math.random();

B、调用兄弟框架函数

        //调用兄弟框架函数  IFR2调用IFR1中的函数 
//JQUERY方法 
//$("#ifr1",parent.document)[0].contentWindow.AddMsg("这也是框架2调用1的函数写入的" + 
Math.random()); 
//JAVASCRIPT方法 
parent.document.getElementById("ifr1").contentWindow.AddMsg("11这也是框架2调用框架1
的函数写入的" + Math.random());

二、FRAMESET框架

页面示例

        <frameset id="framesx" border="1" frameSpacing="5" rows="165,*" frameBorder="1" 
runat="server" width="100%"> <frame id="ifr1" name="ifr1" frameSpacing="5" marginWidth="0" marginHeight="0" 
src="h16a-1.htm" noResize scrolling="no" target=""> <frameset id="mainframe"  border="1" frameSpacing="5"  frameBorder="1"   cols 
="50%,50%" runat="server"> <frame id="ifr2" name="ifr2" marginWidth="20%" marginHeight="100px" 
src="h16a-2.htm" noResize scrolling="no"> <frame width="100%"  id="ifr3" name="ifr3" marginWidth="0" marginHeight="0" 
src="h16a-3.htm" noResize scrolling="auto"> </frameset> 
</frameset>

页面分为上--左右模式 上面是IFFR1 左面是IFR2 右面是IFR2

在火狐测试时发现必须使用NAME属性建议将ID和NAME设置为

相同的名字

1获取其他框架元素并赋值

本例通过上部页面IFR1操作左侧页面IFR2

        //JQUERY方法 
//$("#div",window.parent.frames["ifr2"].document).html("获取兄弟框架并且写入数据" + 
Math.random()); 
//JAVASCRIPT方法 
window.parent.frames["ifr2"].document.getElementById("div").innerHTML = "1获取兄弟框架并且写入数据" + Math.random();


2调用其他框架页面函数

        //JQUERY 
//$(window.parent.frames["ifr2"])[0].add("调用兄弟框架函数"); 
//JAVASCRIPT方法 
window.parent.frames["ifr2"].add("调用兄弟框架函数11");

这篇关于Iframe框架的各种操作,专治各种不服的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/775756

相关文章

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

Spring 框架之Springfox使用详解

《Spring框架之Springfox使用详解》Springfox是Spring框架的API文档工具,集成Swagger规范,自动生成文档并支持多语言/版本,模块化设计便于扩展,但存在版本兼容性、性... 目录核心功能工作原理模块化设计使用示例注意事项优缺点优点缺点总结适用场景建议总结Springfox 是

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

MySQL追踪数据库表更新操作来源的全面指南

《MySQL追踪数据库表更新操作来源的全面指南》本文将以一个具体问题为例,如何监测哪个IP来源对数据库表statistics_test进行了UPDATE操作,文内探讨了多种方法,并提供了详细的代码... 目录引言1. 为什么需要监控数据库更新操作2. 方法1:启用数据库审计日志(1)mysql/mariad

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》:本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-

Python的端到端测试框架SeleniumBase使用解读

《Python的端到端测试框架SeleniumBase使用解读》:本文主要介绍Python的端到端测试框架SeleniumBase使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全... 目录SeleniumBase详细介绍及用法指南什么是 SeleniumBase?SeleniumBase

Oracle 数据库数据操作如何精通 INSERT, UPDATE, DELETE

《Oracle数据库数据操作如何精通INSERT,UPDATE,DELETE》在Oracle数据库中,对表内数据进行增加、修改和删除操作是通过数据操作语言来完成的,下面给大家介绍Oracle数... 目录思维导图一、插入数据 (INSERT)1.1 插入单行数据,指定所有列的值语法:1.2 插入单行数据,指

SQL中JOIN操作的条件使用总结与实践

《SQL中JOIN操作的条件使用总结与实践》在SQL查询中,JOIN操作是多表关联的核心工具,本文将从原理,场景和最佳实践三个方面总结JOIN条件的使用规则,希望可以帮助开发者精准控制查询逻辑... 目录一、ON与WHERE的本质区别二、场景化条件使用规则三、最佳实践建议1.优先使用ON条件2.WHERE用