`

web界面父子页面互相调用

 
阅读更多

父页面:parent.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parent</title>
<script>
 function parentFunction() {
  alert('function in parent');
 }

 function callChild() {
  child.window.childFunction();
  /*
   child 为iframe的name属性值,
   不能为id,因为在FireFox下id不能获取iframe对象
  */
 }
</script>
</head>
<body>
<input type="button" name="call child"  value="call child" onclick="callChild()"/>
<br/><br/>
<iframe name="child" src="./child.html" ></iframe>
</body>
</html>


子页面:child.html

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>child</title>
<script>
 function childFunction() {
  alert('function in child');
 }

 function callParent() {
  parent.parentFunction();
 }
</script>
</head>
<body>
<input type="button" name="call parent" value="call parent" onclick="callParent()"/>
</body>
</html>

分享到:
评论

相关推荐

    asp.net 父子页面传值

    在ASP.NET中,父子页面之间的通信是Web应用程序中常见的需求,尤其在构建复杂交互的多层级界面时。本文将深入探讨如何在ASP.NET环境中实现父子页面间的值传递,并分享一些实用的技术和策略。 首先,我们要了解ASP...

    Jquery调用iframe父页面中的元素及方法

    在Web开发中,iframe是一个非常实用的HTML标签,它允许在父页面中嵌入另一个页面。这种技术常用于展示第三方内容、广告或创建复杂的用户界面。然而,操作iframe中的内容相对复杂,尤其是在需要跨域的情况下。不过,...

    【JavaScript源代码】web面试vue自定义组件及调用方式.docx

    在Web开发中,Vue.js是一个流行的前端框架,它允许开发者创建可重用的组件,以提高代码复用性和项目的可维护性。Vue自定义组件是其核心特性之一,能够帮助开发者构建复杂的用户界面。本篇将详细介绍在Vue中如何...

    手机信息管理 Vue 父子组件

    在IT行业中,Vue.js是一个非常流行的前端JavaScript框架,它用于构建用户界面,尤其在Web应用开发中表现出色。本文将详细探讨如何利用Vue.js来管理手机信息,包括增、删、改、查等基本操作,以及Vue框架中的父子组件...

    flex把html页面作为类似iframe的样子的组件完全的嵌入到mxml中去。

    在Flex开发中,有时我们需要将HTML页面集成到MXML应用中,以便利用Web技术与Flex的强大功能相结合。这种集成方式可以实现丰富的用户交互和界面设计。"flex把html页面作为类似iframe的样子的组件完全的嵌入到mxml中去...

    iframe子页面操作父页面并实现屏蔽页面弹出层效果

    这个知识点对于任何需要处理父子页面交互的应用场景都非常有用,无论是在Web开发还是前端开发的环境中。掌握如何操作iframe以及其内部元素,对于构建动态和响应式的用户界面至关重要。同时,了解和使用这些技术可以...

    微服务调用链监控CAT架构和实践

    4. **展示层(UI)**:提供Web界面,展示各种监控图表和报表,帮助运营人员直观地了解系统的运行状态,支持自定义报表和告警策略。 **CAT实践** 在实际应用中,CAT提供了丰富的功能,包括但不限于: 1. **事务...

    SSM+Maven实现无刷新三级联动

    本项目通过这四个核心元素实现了在用户界面上进行三级联动选择时无需页面刷新的功能,提升了用户体验。 首先,我们来详细解释SSM框架的核心组成部分: 1. **Spring**:Spring是Java企业级应用的核心框架,它提供了...

    dwr+struts 三级菜单

    - JavaScript文件:包含了DWR的客户端调用和页面事件处理。 - JSP页面:显示菜单并处理用户交互。 总结而言,这个项目展示了`DWR`和`Struts`在Web应用中的强大组合,它们共同提供了一种高效、灵活的方式来实现动态...

    Ext类似于flex树插件及调用demo

    在IT行业中,EXTJS是一个非常流行的JavaScript库,用于构建富客户端Web应用程序。它提供了一整套组件,包括数据绑定、模型、视图、控制器和存储等机制,使得开发者能够创建功能丰富的用户界面。本篇文章将重点讲解...

    zipkin-server-2.12.9-exec.rar

    4. **Zipkin Server**:作为Zipkin的核心组件,它负责接收来自应用的日志数据(Spans),并提供Web界面供用户查询和分析这些追踪数据。 5. **存储组件**:Zipkin Server支持多种存储后端,如MySQL、Elasticsearch、...

    JSF教程

    JavaServer Faces(JSF)是Java平台上的一种用于构建用户界面的服务器端技术,它提供了组件模型和事件驱动的编程模型,使得开发Web应用程序变得更加简单。本教程将深入探讨JSF的核心概念、架构以及实际应用。 ### 1...

    Vue.js 2 and Bootstrap 4 Web Development(pdf+epub+mobi+code_files).zip

    Vue.js 2 和 Bootstrap 4 是现代Web开发中两个非常重要的技术栈,它们结合使用能够构建出高效、响应式和用户友好的Web应用程序。Vue.js 2 是一个轻量级的JavaScript框架,专注于视图层,提供声明式的数据绑定和组件...

    Vue2.0学习之详解Vue 组件及父子组件通信

    Vue.js 是一款流行的前端框架,Vue2.0 在其组件化设计方面有着强大的能力,使得开发者能够构建可复用、可维护的复杂Web应用。本文将深入探讨Vue2.0中的组件系统以及父子组件间的通信机制。 首先,我们来理解什么是...

    WEB 面试题汇总-( 文件名称要11个字什么奇葩垃圾规则 )

    11. **父子组件通信**:父组件通过props向下传递数据,子组件通过$emit向上触发事件,或使用ref直接调用子组件方法。 12. **递归组件**:组件可引用自身形成递归结构,常用于树形数据展示。 13. **组件间通信**:...

    一个请假单流程的实现

    5. **前端实现**:用户需要一个界面来提交请假申请,查看审批状态。这可能涉及到Web开发,使用HTML、CSS、JavaScript,以及Spring MVC、AngularJS等前端框架。 6. **部署与测试**:完成开发后,需要在服务器上部署...

    vue.js学习笔记

    Vue的核心功能是能够将页面上的功能模块化开发,即通过组件化的方式构建前端界面,从而提高开发效率和可维护性。Vue.js采用了数据驱动和组件化的思想,允许开发者将复杂的应用拆分为一个个组件,每个组件负责一块...

    HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试

    7. @State装饰的变量表示组件内部的状态数据,当状态数据变化时,会触发UI刷新,重新调用build方法。 8. ArkTS警告弹窗可用于实现如登录界面的隐私勾选校验功能,提供了方便的用户交互。 9. 低代码开发允许开发者...

    Uni-App从入门到实战教程[视频课程].txt打包整理.zip

    Uni-App 是一个基于 Vue.js 的跨端开发框架,允许开发者编写一次代码,同时发布到 iOS、Android、Web(H5)、微信小程序、支付宝小程序等多个平台。本教程旨在帮助初学者快速掌握 Uni-App 的核心概念和实践技巧,...

Global site tag (gtag.js) - Google Analytics