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

相关文章

PyCharm接入DeepSeek实现AI编程的操作流程

《PyCharm接入DeepSeek实现AI编程的操作流程》DeepSeek是一家专注于人工智能技术研发的公司,致力于开发高性能、低成本的AI模型,接下来,我们把DeepSeek接入到PyCharm中... 目录引言效果演示创建API key在PyCharm中下载Continue插件配置Continue引言

使用Python实现操作mongodb详解

《使用Python实现操作mongodb详解》这篇文章主要为大家详细介绍了使用Python实现操作mongodb的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、示例二、常用指令三、遇到的问题一、示例from pymongo import MongoClientf

使用MongoDB进行数据存储的操作流程

《使用MongoDB进行数据存储的操作流程》在现代应用开发中,数据存储是一个至关重要的部分,随着数据量的增大和复杂性的增加,传统的关系型数据库有时难以应对高并发和大数据量的处理需求,MongoDB作为... 目录什么是MongoDB?MongoDB的优势使用MongoDB进行数据存储1. 安装MongoDB

Linux使用fdisk进行磁盘的相关操作

《Linux使用fdisk进行磁盘的相关操作》fdisk命令是Linux中用于管理磁盘分区的强大文本实用程序,这篇文章主要为大家详细介绍了如何使用fdisk进行磁盘的相关操作,需要的可以了解下... 目录简介基本语法示例用法列出所有分区查看指定磁盘的区分管理指定的磁盘进入交互式模式创建一个新的分区删除一个存

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck

C# 读写ini文件操作实现

《C#读写ini文件操作实现》本文主要介绍了C#读写ini文件操作实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录一、INI文件结构二、读取INI文件中的数据在C#应用程序中,常将INI文件作为配置文件,用于存储应用程序的

Python使用qrcode库实现生成二维码的操作指南

《Python使用qrcode库实现生成二维码的操作指南》二维码是一种广泛使用的二维条码,因其高效的数据存储能力和易于扫描的特点,广泛应用于支付、身份验证、营销推广等领域,Pythonqrcode库是... 目录一、安装 python qrcode 库二、基本使用方法1. 生成简单二维码2. 生成带 Log

Java操作ElasticSearch的实例详解

《Java操作ElasticSearch的实例详解》Elasticsearch是一个分布式的搜索和分析引擎,广泛用于全文搜索、日志分析等场景,本文将介绍如何在Java应用中使用Elastics... 目录简介环境准备1. 安装 Elasticsearch2. 添加依赖连接 Elasticsearch1. 创

java Stream操作转换方法

《javaStream操作转换方法》文章总结了Java8中流(Stream)API的多种常用方法,包括创建流、过滤、遍历、分组、排序、去重、查找、匹配、转换、归约、打印日志、最大最小值、统计、连接、... 目录流创建1、list 转 map2、filter()过滤3、foreach遍历4、groupingB

Java操作PDF文件实现签订电子合同详细教程

《Java操作PDF文件实现签订电子合同详细教程》:本文主要介绍如何在PDF中加入电子签章与电子签名的过程,包括编写Word文件、生成PDF、为PDF格式做表单、为表单赋值、生成文档以及上传到OB... 目录前言:先看效果:1.编写word文件1.2然后生成PDF格式进行保存1.3我这里是将文件保存到本地后