`
huanyq2008
  • 浏览: 171757 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

子页面和父页面的相互调用

JavaScriptXHTMLHTMLWeb 
阅读更多

父页面

 

<!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 type="text/javascript">
var parentStr = "-----父页面的js变量-----";
function getValue(){
	document.getElementById("getText").value = document.getElementById("framePage").contentWindow.document.getElementById("forParent").value;
}
function getJsVar(){
	document.getElementById("getText").value = document.getElementById("framePage").contentWindow.childStr;
}
function getFunc(){
	document.getElementById("framePage").contentWindow.testFunc();
}
function testFunc(){
	alert("子页面调用了此方法！");
}
</script>
</head>

<body>
子页面获取<input type="text" id="forChild" value="parent"/><br/>
<input type="text" id="getText"/>
<button onclick="getValue()">获得子页面的值</button><button onclick="getJsVar()">获得子页面的Js变量</button><button onclick="getFunc()">调用子页面的Js方法</button><br/><br/><br/><br/><br/>

<iframe id="framePage" name="framePage" style="width:100%;height:500px" src="childPage.html"/>
</body>
</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 type="text/javascript">
var childStr = "子页面的js变量";
function getValue(){
	document.getElementById("getText").value = parent.document.getElementById("forChild").value;
}
function getParentJsVar(){
	document.getElementById("getText").value = parent.parentStr;
}
function getFunc(){
	parent.testFunc();
}
function testFunc(){
	alert("父页面调用了此方法！");
}
</script>
</head>

<body>
父页面获取<input type="text" id="forParent" value="child"/><br/>
<input type="text" id="getText"/>
<button onclick="getValue()">获得父页面的值</button><button onclick="getParentJsVar()">获得父页面的Js变量</button><button onclick="getFunc()">获得父页面的值</button>
</body>
</html>

 

 

 

经验总结：

1. 子页面调用父页面不会有什么大的问题。但父页面调用子页面时需要确保子页面已经加载完成，不然就会报错。这个无需多说。 有两种解决方式：

   1) 在父页面用setTimeout设置延时调用

   2) 在子页面onload完成后，触发父页面来调用子页面。

2. 注意：在web开发过程中，有时出现问题，需要考虑HTML 文档遵循的文档类型是否有影响。

  如：<!DOCTYPE html 。。。。。。。。

 

 

 

 

 

 

 

 

 

 

分享到：
| 网站内部SEO优化的重要性
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    iframe父页面与子页面通信及相互调用方法

    父页面和子页面都可以调用此方法发送和接收消息。 - **`window.name`属性**：由于`window.name`的特性是跨页面保持不变的，因此可以利用这一点在页面跳转时传递数据。 - **`jQuery`插件**：`jqueryiframe`可能...

    浅谈js中子页面父页面方法 变量相互调用

    （1）子页面调用父页面的方法或者变量： window.parent.方法()或者变量名 window.parent相当于定位到父页面 之后的操作和在父页面中写代码一样写 window.parent.aa();//调取aa函数 window.parent.bb;//调取bb变量 ...

    父子页面相互调用总结

    例如，子页面可以修改父页面的某个变量或者调用父页面的函数。这种方式灵活且广泛适用，但需注意跨域安全问题。 `showModalDialog`与`showModelessDialog`类似，也是IE特有功能，用于打开一个模态对话框，即用户...

    frame之间以及子页面和父页面间参数传递

    在提供的示例代码中，父页面和子页面分别使用了简单的JavaScript函数实现了相互之间的元素访问。这种直接访问DOM元素的方法简单直接，适合在同源策略允许的情况下使用。 - **父页面**： ```html 获取子页面文本" ...

    iframe父页面与子页面互相调用

    - **跨域问题**：如果父页面和子页面不在同一个域下，则无法进行上述的DOM操作，因为这违反了浏览器的同源策略。解决方法是通过JSONP、CORS等方式实现跨域数据交换。 - **命名规范**：在使用`window.frames`时，需要...

    子页面访问父页面和跨iframe访问(ie 和火狐)

    以下是对"子页面访问父页面和跨iframe访问(ie 和火狐)"这一主题的详细解释。 首先，我们要理解浏览器的安全模型。出于安全考虑，浏览器实施了同源策略（Same-Origin Policy），这意味着一个页面只能读取或修改与它...

    js中子页面获取父页面ID

    如果父页面和子页面处于不同的域，则由于浏览器的安全策略（同源策略），这些操作将无法执行。此时，需要使用更复杂的技术如`postMessage`API来进行跨域通信。 ### 总结 本文详细介绍了如何在JavaScript中实现子...

    子窗口刷新父窗口总结

    ### 子窗口刷新父窗口技术总结 在网页开发中，我们常常遇到需要在子窗口完成某些操作后，刷新或更新父窗口...通过适当的编程策略，可以有效地在子窗口操作完毕后，触发父窗口的刷新，提升用户体验和程序功能的连贯性。

    iframe 父窗口和子窗口相互的调用方法集锦

    2、父窗口调用子窗口：myFrame.window.functionName(); 3、子窗品调用父窗口：parent.functionName(); 简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行 4、父窗口页面源码： 代码如下: &lt;html&gt; &...

    用户控件与父页面及相互间方法调用和属性访问

    用户控件与父页面及相互间方法调用和属性访问 用户控件开发中，实现控件与父页面及相互间方法调用和属性访问是一项非常重要的技术。本文将详细介绍用户控件调用父页面的方法、用户控件与用户控件之间的方法调用、...

    (js)父子页面相互调用总结(js)父子页面相互调用总结

    本文将详细介绍如何在父页面与子页面（包括通过`iframe`嵌入的页面和通过`window.open`打开的新窗口）之间实现数据共享和方法调用。 #### 1. 使用`iframe`实现父子页面间的通信 **父页面：** 父页面可以通过获取`...

    layer弹出层父子页面事件相互调用方法

    当父页面和子页面通过iframe进行嵌套时，它们之间的数据交互变得不那么直接。为了实现数据的传递，可以通过在父页面中设置iframe的src属性，并在子页面中使用JavaScript获取父页面传递的参数，同时也可以在子页面中...

    JavaScript中的子窗口与父窗口的互相调用问题

    在Web开发中，子窗口与父窗口间的互相调用是一个常见的需求，尤其是在涉及iframe或者通过JavaScript弹出新窗口的场景。本文深入探讨了JavaScript中如何实现子窗口与父窗口间的数据交互、窗口控制等操作。 首先，想...

    iframe父与子、子与子之间控制以及js相互调用实际例

    - `window.postMessage()` 同样适用于子页面向父页面发送信息。 3. **子iframe与子iframe的通信：** - 通过`parent`和`contentWindow`的组合，可以实现子iframe间的通信。首先，一个子iframe通过`parent`访问到父...

    WPF中Window与Page相互调用示例

    在Windows Presentation Foundation (WPF) 中，Window和Page是两种常用的设计元素，分别代表独立的窗口和可导航的页面。本示例将深入探讨如何在WPF应用中实现Window与Page之间的相互调用，这对于构建复杂的用户界面...

    关于Iframe父页面与子页面之间的相互调用

    但是，如果一个文档定义了一个或者多个框架(即：包含一个或者多个frame或者iframe标签)，浏览器就会为原始文档创建一个window对象，再为每个iframe创建额外的window对象，这些额外的window对象是原始窗口的子窗口。...

    JS父页面与子页面相互传值方法

    需要注意的是，由于同源策略的限制，只有当父页面和子页面位于同一域下，才能直接通过JS进行通信。如果跨域，需要借助其他技术如CORS、JSONP或WebSocket等来实现数据传递。此外，出于安全考虑，现代浏览器可能限制...

    子窗口、父窗口和Silverlight之间的相互调用

    在Web开发中，交互是用户体验的关键部分，而子窗口、父窗口以及Silverlight之间的相互调用则涉及到跨窗口通信和富客户端技术的应用。本文将详细解释这些知识点。 首先，我们来探讨**父页面调用子页面中的JS**。在...

Magicbox
Global site tag (gtag.js) - Google Analytics