`
在水伊方
  • 浏览: 111095 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

JavaScript窗口之间值传递—框架之间传值

阅读更多

frame框架之间传值

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>无标题文档</title>
</head>

<frameset cols="250, *" frameborder="1">
	<frame src="left.html" name="left" />
    <frame src="right.html" name="right" />
</frameset>
</html> 

 

left.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>无标题文档</title>
</head>

<body>
	用户名:<input type="text" name="username"/>
</body>
</html>

 

 

right.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>无标题文档</title>
<script language="javascript">
	function setValueToLeft() {
		// window对象表示装载该网页的那个帧窗口,这个window对象的parent属性对应整个浏览器窗口对象,
		// 整个浏览器窗口对象的frames数组属性的第0个元素就是左边帧窗口
		var username = window.parent.frames[0].document.getElementsByName("username")[0];
		username.value = "keveon";
		alert(username.value);
	}
</script>
</head>

<body>	
	<input type="button" value="设值" onclick="setValueToLeft()" />
</body>
</html>

 

iframe框架之间传值

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>无标题文档</title>
<script language="javascript">
	function setValueToChild() {
		// frames表示当前窗口所拥有的子窗口的属性,是一个数组
		// 获取第一个子窗体即<iframe src="child.html"></iframe>
		var age = window.frames[0].document.getElementsByName("age")[0];
		age.value = "20";
	}
</script>
</head>

<body>
	<h1>这是父窗体</h1>
    <iframe src="child.html"></iframe>
    <hr />
    用户名:<input name="username" /><br />
    <input type="button" value="给子窗体赋值" onclick="setValueToChild()" />
</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>无标题文档</title>
<script language="javascript">
	function setValueToParent() {
		// 通过window.parent获取父窗体对象
		var username = window.parent.document.getElementsByName("username")[0];
		username.value = "keveon";	
	}
</script>
</head>

<body>
	<h3>这是子窗体</h3>
	年龄:<input name="age" />
    <input type="button" value="给父窗体赋值" onclick="setValueToParent()" />
</body>
</html>

 

 

分享到:
评论

相关推荐

    frame与frame之间如何用JavaScript传值

    在处理涉及多个框架的交互时,有时我们需要在这些框架之间传递数据,例如使用JavaScript。本文将详细讲解如何使用JavaScript在frame与frame之间进行值的传递。 首先,了解基本概念。`window`对象是浏览器的全局对象...

    子窗口传值到父窗口.rar

    在Web开发中,有时我们需要在子窗口与父窗口之间传递数据。这通常发生在弹出窗口或者框架集等场景中,用户在子窗口进行操作后,需要将结果反馈给父窗口,以便更新父窗口的状态或展示相关信息。这个过程就称为“子...

    javascript页面之间传值

    例如,如果在父窗口中创建了一个名为`childWin`的子窗口,我们可以在子窗口中设置一个全局变量来存储从父窗口传递过来的值,然后在父窗口中通过`childWin.myValue`来获取这个值。 第二种方法是利用`window.post...

    弹出窗口互相传值范例

    在这个"弹出窗口互相传值范例"中,我们将会探讨如何在不同的弹出窗口之间传递数据,这在Web开发中是一个重要的技能。 首先,我们看到的文件名如`MikeCat_pcwin.aspx`、`cwin_modal.aspx`、`cwin.aspx`等,这些都是...

    动态增删table以及后台传值和弹出窗口父子窗口传值

    在IT行业中,动态增删table和后台传值是前端与后端交互的重要技术,而弹出窗口父子窗口之间的数据传递则是提升用户体验的关键。下面将详细解释这些知识点。 首先,动态增删table是一种常见的用户界面设计,它允许...

    子父窗口传值

    - 使用JavaScript的`window.opener`属性:子窗口可以通过`window.opener`引用父窗口的对象,从而可以调用父窗口的方法或修改其变量来传递数据。 - 事件触发:子窗口可以通过触发自定义事件,父窗口通过监听这个...

    多窗口互相传值

    标题"多窗口互相传值"直指这个关键问题,它意味着在不同的应用程序窗口或者同一个应用内的不同窗口之间交换数据。这在桌面应用程序、Web应用甚至移动应用中都是常见的操作。以下是对这个主题的详细讲解: 1. **数据...

    Layui实现父子页面之间值传递.zip

    本教程将深入讲解如何使用 `Layui` 实现父子页面之间的值传递。 首先,我们需要了解 `Layui` 的基本用法。`Layui` 提供了一个基于 `JavaScript` 的模块化机制,通过 `layui.use()` 方法加载需要的模块,如 `layui....

    模态窗口页的传值模态窗口页的传值

    本文将深入探讨如何在模态窗口(Modal Window)之间传递数据,即“模态窗口页的传值”。 1. **创建模态窗口** - 常见的实现方式是通过HTML的`&lt;div&gt;`元素配合CSS来构建模态框,然后使用JavaScript或jQuery控制其...

    easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    在EasyUI中,我们可能会遇到需要在弹出窗口(子页面)与父页面之间进行数据传递或调用父页面方法的需求。下面将详细讲解这个过程。 首先,让我们理解标题中的“弹出window窗口传值”。在EasyUI中,创建一个弹出窗口...

    javascript 跨网页传值

    JavaScript跨网页传值是Web开发中的常见需求,它允许用户在不同的HTML页面间传递数据,无需依赖服务器端技术如JSP中的session。本教程将详细讲解如何实现这一功能,主要涉及JavaScript的基础知识以及一些实用技巧。 ...

    模式窗体页面传值关于自定义控件与页面之间的传值

    在.NET框架中,尤其是ASP.NET或WinForms应用中,我们经常需要处理页面间或自定义控件与页面之间的数据传递。这个过程对于构建交互性强、功能丰富的用户界面至关重要。"模式窗体页面传值"这一主题主要关注的是如何在...

    frameSet应用 子父窗口传值

    在`frameSet`环境中,子窗口可以通过`window.parent`对象访问父窗口,实现数据传递。例如,假设有一个名为`leftFrame`的子窗口想要向名为`rightFrame`的父窗口发送消息: ```javascript // 在leftFrame中 window....

    二个iframe之间传值 的小例子

    当在一个页面内存在多个`iframe`时,有时我们需要在这些`iframe`之间传递数据或调用它们的JavaScript方法,以实现更复杂的交互功能。本篇文章将详细解释如何在两个`iframe`之间进行通信,并通过提供的源码`left....

    js 实现iframe 之间传值

    本篇文章将详细介绍如何使用JavaScript来实现在`iframe`之间传递值。 1. 同源策略与跨域限制: JavaScript遵循同源策略,这意味着来自不同源(协议+域名+端口)的`iframe`之间默认无法通过JavaScript进行通信。...

    无刷新 子窗体传值父窗体

    在传统的方式中,如果想要从子窗口向父窗口传递数据,通常需要借助于JavaScript事件处理和DOM操作。 1. **JavaScript事件处理**: 当用户在子窗口执行某个操作后,例如点击按钮,可以触发一个JavaScript事件。通过...

    JS简单实现父子窗口传值功能示例【未使用iframe框架】

    子窗口中的JavaScript代码首先获取通过`dialogArguments`属性传递的父窗口引用,然后获取父窗口传递过来的值: ```javascript var fatherwin = window.dialogArguments; if (fatherwin != null) { document....

    c#vs2010 窗体间值传递

    窗体间值传递是开发多窗口应用程序时的一个常见需求,它涉及到如何在不同的窗体之间共享数据。以下是关于这个主题的详细讲解: 一、窗体间值传递的基本方法 1. 构造函数传递:在创建新窗体实例时,可以通过构造...

    静态页跳转传值、静态页跳转传值

    - 在一个隐藏的表单中设置需要传递的值,然后通过JavaScript触发表单的提交,目标页面可以通过表单的提交事件获取这些值。这是一种较旧的方法,现在不常用,但它仍然有效。 7. **自定义事件和消息传递**: - 如果...

    ie+FF通用的父子模态对话框相互传值

    在IE和Firefox这两个主流浏览器上实现父子模态对话框之间的值传递,需要对JavaScript有深入的理解,并且考虑到跨浏览器兼容性。以下将详细解释这一技术点。 首先,让我们理解什么是父子模态对话框。父对话框通常是...

Global site tag (gtag.js) - Google Analytics