1.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function parentResponse() {
alert('parentResponse');
}
//html5
var onmessage = function(e) {
console.dir(e);
parentResponse();
};
//
$(function(){
//dom
$('#callChild').click(function(){
window.frames["inframe"].childResponse();
window.frames["inframe"].postMessage("parentCall", "*");
});
//html5
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', onmessage);
}
});
</script>
</head>
<body>
<iframe src="call.html" id="inframe" name="inframe"></iframe>
<button id="callChild">call child</button>
</body>
</html>
2.call.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function childResponse() {
alert('childReponse');
}
//html5
var onmessage = function(e) {
console.dir(e);
childResponse();
};
//
$(function(){
$('#callParent').click(function(){
var frame = window.parent;
while(frame != frame.parent && frame.name != "app_frame") {
frame=frame.parent;
}
frame.parentResponse();
//html5
frame.postMessage("childCall", "*");
});
//html5
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', onmessage);
}
});
</script>
</head>
<body>
<button id="callParent">call parent</button>
</body>
</html>
分享到：
相关推荐
- **DOM操作**：如果父页面和子页面同源，可以使用JavaScript的`contentWindow`属性或`contentDocument`属性来访问子页面的`window`对象和`document`对象，实现通信。例如： ```javascript var iframe = document...
总结，`iframe`中的JavaScript交互涉及到页面间的通信，无论是父页面调用子页面还是子页面调用父页面，都需要理解`window`对象、同源策略以及跨域通信机制。正确使用这些技术，可以在多页面应用中实现更复杂的功能...
"iframe子父页面调用js函数示例" 在实际项目中，iframe 子父页面调用 js 函数是非常有用的。下面是一个示例，演示如何在 iframe 子页面中调用父页面的 js 函数，以及如何在父页面中调用 iframe 子页面的 js 函数。 ...
- **跨域问题**：如果父页面和子页面不在同一个域下，则无法进行上述的DOM操作，因为这违反了浏览器的同源策略。解决方法是通过JSONP、CORS等方式实现跨域数据交换。 - **命名规范**：在使用`window.frames`时，需要...
因此，这里提到的方法和实例都基于同源策略，即父页面和iframe页面属于同一域名。如果尝试在不同源的iframe中操作元素，将会遇到跨域访问限制，这是由浏览器的安全机制决定的。 在具体实现上，我们可以使用jQuery...
在EasyUI中，我们可能会遇到需要在弹出窗口（子页面）与父页面之间进行数据传递或调用父页面方法的需求。下面将详细讲解这个过程。 首先，让我们理解标题中的“弹出window窗口传值”。在EasyUI中，创建一个弹出窗口...
标题“demo_DEMO_子页面刷新父页面iframe_”暗示我们关注的焦点是关于如何在子页面中触发父页面的刷新操作，特别是在一个IFrame上下文中。下面将详细探讨这个主题。 首先，我们需要了解IFrame（内联框架）的基本...
在标题和描述中提到的"frameset父页面和子页面的方法之间调用个属性的调用"，涉及到的是跨框架通信的概念。当一个`frameset`中有多个`frame`或`iframe`时，它们之间可能需要进行数据交换或操作交互。这种交互可以...
与之相关的常见需求是实现子父页面之间的交互，例如调用JavaScript函数。本篇文章将详细讲解如何在`iframe`子页面调用父页面的JS函数以及反之的操作。 ### 1. 子页面调用父页面的JS函数 在`iframe`子页面中，要...
本文将对jquery和js调用iframe父窗口与子窗口元素的方法进行整理。 1. jquery在iframe子页面获取父页面元素 在jquery中，可以使用以下代码来获取父页面的元素： ``` $("#objid", parent.document) ``` 其中，`...
JavaScript实现IFrame子窗口调用父窗口的全局变量
总的来说，理解和掌握如何在父窗口与`iframe`子窗口之间进行通信是Web开发中的重要技能，尤其在处理复杂页面结构和跨窗口数据交换时。通过学习和实践这些技术，开发者可以更好地构建交互丰富的Web应用。
// 然后，可以调用iframe页面中的函数 frames.right(); ``` 这里的`window.parent.window`用于返回到包含`iframe`的上一级窗口，然后通过`getElementById`找到`iframe`元素，进一步获取它的`contentWindow`属性，这...
本文实例讲述了js中iframe调用父页面的方法。分享给大家供大家参考。具体实现方法如下： 子页面调用父页面的方法在js中很容易实现。我们只需要在主页面加个函数，然后在子页面通过window.parent.方法()即可实现了 ...
父页面可以访问IFrame内的`window.contentWindow`对象，子页面也可以通过`window.parent`调用父页面的方法。 例如，`parent.html`中： ```html <iframe id="myFrame" src="childPage.html"></iframe> var ...
在Web开发中，有时我们需要在iframe中嵌入的页面与主页面，或者两个嵌套的iframe之间进行数据交换和功能交互。这可以通过JavaScript来实现，主要涉及以下几个方面： 1. **父页面与iframe的通信：** - `...
6. **易于使用**：由于描述中提到，所有代码都在子页面内部，这意味着用户只需要在子页面中引入必要的JavaScript和CSS，然后调用相关的函数即可，无需修改父页面的代码，提高了代码的可维护性和复用性。 在提供的`...
在网页开发中，有时我们需要在不同的页面或者框架之间进行交互，比如子页面操作父页面的数据，或者在一个iframe中访问另一个iframe中的内容。这种情况在实际应用中很常见，尤其是在构建复杂Web应用时。以下是对"子...
总结来说，`iframe`与父页面间的通信主要依赖于JavaScript的DOM接口、`postMessage`/`message`事件以及URL参数和Web存储。在实际应用中，开发者应根据项目需求和安全性考虑选择合适的通信方式。了解这些方法，可以...