两个重要的javascript语句:
top.result.document.location='result.html?data=' + data;
和
window.top.frames['result'].document.getElementById("an").innerHTML=data;
都很好理解, 第一个就是js重新载入父窗口中name为result的iframe页面, 第二个就是直接通过选择另一个iframe中的元素来赋值.
下面是一个传值的例子
框架页面-index.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>
<iframe width="100%" height="100" name="find" id="find" src="find.html"></iframe>
<iframe width="100%" height="600" name="result" id="result" src="result.html"></iframe>
</body>
</html>
查询页面-find.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" type="text/javascript">
function show(){
var data = document.form1.data.value;
top.result.document.location='result.html?data=' + data;
//window.top.frames['result'].document.getElementById("an").innerHTML=data;
}
</script>
</head>
<body>
<div >
<form name="form1" method="post" >
<p><span>数据：</span>
<input type="text" name="data" class="text" id="text1"/>
</p>
<p>
<input type="submit" value="提交" onclick="javascript:show();" />
</p>
</form>
</div>
</body>
</html>
结果页面-result.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>
<p>上面输入的文字是: <span id="an"> </span></p>
</body>
<script language="javascript" type="text/javascript">
function Request(argname)
{
var url = document.location.href;
var arrStr = url.substring(url.indexOf("?")+1).split("&");
//return arrStr;
for(var i =0;i<arrStr.length;i++)
{
var loc = arrStr[i].indexOf(argname+"=");
if(loc!=-1)
{
return arrStr[i].replace(argname+"=","").replace("?","");
break;
}
}
return "";
}
//使用Request("argname")即可得到参数值;
var data=Request("data");
this.document.getElementById('an').innerHTML= data;
</script>
</html>
********************************************************文章来源************************************************************
http://blog.csdn.net/xiezhiyong3621/article/details/6791938
********************************************************文章来源************************************************************
********************************************************值得一看************************************************************
相关推荐
总的来说，JavaScript父子页面传参涉及多种技术，根据实际场景选择合适的方法。理解并熟练掌握这些技术对于开发交互丰富的Web应用至关重要。在实际项目中，还应注意安全性问题，避免跨站脚本攻击（XSS）等风险。
JavaScript遵循同源策略，这意味着来自不同源（协议+域名+端口）的`iframe`之间默认无法通过JavaScript进行通信。为了解决这个问题，我们可以利用`window.postMessage()`方法，它允许跨域通信。 2. `window.post...
但同时，它也引入了父页面与iframe之间进行数据交换的需求，也就是所谓的“传值传参”。随着浏览器技术的发展，不同浏览器间的兼容性问题成为开发者需要考虑的重要方面。特别是早期的浏览器，如Internet Explorer和...
在父页面中可以通过`document.frames["iframeID"].document.getElementById("elementID")`的方式获取到子页面中的元素。例如，在示例代码中，`getChildEl()`函数通过`document.frames("inner").document....
这个问题通常发生在两个或多个iframe之间尝试通过JavaScript互相重载对方，导致无限循环，严重影响用户体验并可能导致浏览器崩溃。 首先，让我们深入理解问题的原因。当两个iframe A和B相互引用并试图重载对方时，...
当用户触发某个操作（如点击按钮）时，可以通过JavaScript改变iframe的`src`属性，使其指向需要加载的页面。 2. **值传递** 在MVC中，值传递可以通过URL参数、查询字符串或使用JavaScript的`window.postMessage`...
总之，理解如何在父页面中获取`iframe`子页面的元素值是Web开发中的一个重要技能，这涉及到DOM操作、JavaScript的跨窗口通信以及对同源策略的理解。在实际应用中，开发者还需要根据具体需求和安全考虑来灵活运用这些...
这样可以将不同来源的内容整合到同一个页面上，但同时也引入了跨域问题，因为`iframe`内的页面可能来自不同的源，浏览器出于安全考虑，通常不允许它们之间直接进行JavaScript级别的交互。 要实现`iframe`子向父页面...
需要注意的是，由于同源策略的限制，只有当主页面和`iframe`页面位于同一个域下时，我们才能直接操作`iframe`中的元素。如果它们位于不同的域，那么我们需要考虑跨域解决方案，这通常涉及到服务器端的设置和CORS（跨...
JS实现向iframe中表单传值是常见的交互技术，它涉及到JavaScript对页面元素的操作以及表单属性的处理。以下是对这个主题的详细解释： 首先，我们需要理解iframe的基本概念。iframe（Inline Frame）是一种在HTML文档...
在JavaScript中使用cjkEncode有两种方式：一种是通过加载finereport.js文件，另一种是直接在页面中调用cjkEncode函数。 首先，我们可以通过加载finereport.js文件来使用cjkEncode方法。这个JS库基于jquery框架，...
在js中，我们时常用到用iframe做系统框架，在子页面也，父页面之间的值传递是一个问题，下面是js获取父窗体和子窗体的对象js：1.在iframe子页面中获取父页面的元素： a>window.parent.document这个是获取父页面...
本文将通过一个具体的示例来介绍如何使用 jQuery 来实现页面之间的数据传递。 #### 二、技术栈与环境 本示例涉及的主要技术包括： - **jQuery**：用于简化 JavaScript 的 HTML 文档遍历、事件处理、动画以及 Ajax ...
子页面加载后，通过JavaScript的`window.location.search`获取查询字符串，解析并使用这些数据。 2. `localStorage`或`sessionStorage`：这两种Web存储机制允许在浏览器的客户端存储数据。父页面可以将数据写入存储...
`Layui` 提供了一个基于 `JavaScript` 的模块化机制，通过 `layui.use()` 方法加载需要的模块，如 `layui.table` 和 `layui.layer`。`layui.table` 用于展示数据表格，而 `layui.layer` 则用于弹出层，可以用来创建...
在非跨域情况下，父页面可以通过`iframe`的`name`属性直接访问子页面中的方法和变量。以下是一个简单的例子： 1. 父页面： ```html 点击 <iframe src="a.html" name='child' id="f"></iframe> var ob = ...
在IT行业中，尤其是在Web开发领域，页面间的数据交互是一个常见的需求。"接收弹出页面的回传值"这个话题正是关于这种交互的一种实现方式。它涉及到JavaScript、浏览器API以及可能的框架（如jQuery）的应用。下面我们...
在JavaScript中，通过对话框进行参数传递是一种常见的交互方式，尤其在需要弹出一个模态对话框并与其进行数据交换的场景下更为常见。本文将详细介绍如何利用`window.showModalDialog()`方法来实现这种参数传递，并...
Flex与JavaScript的交互通常涉及到在Flex应用中嵌入HTML页面或iframe，并通过这种方式与JavaScript代码进行通讯。 在Flex中，可以通过ActionScript调用JavaScript函数。Flex提供了几个API，如Externalinterface类，...
在本文中，我们将深入探讨如何使用layui框架的type2弹窗功能通过URL向iframe嵌套的子页面传递参数。layui是一款流行的前端UI框架，它的layer模块提供了丰富的弹窗功能，包括type2类型的弹窗，它支持打开一个内联网页...