`
JavaSam
  • 浏览: 954764 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

不跨域的情况下父页面访问iframe内元素和js方法的完整步骤

 
阅读更多

1.首先两个页面在同一域下

 

例:A.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>resize</title>
		<meta name="author" content="Administrator" />
		<!-- Date: 2013-08-30 -->
	</head>
	<body>
		<div>
       	<iframe name="test" src="B.HTML" id="test" frameborder="no" style="margin: 50px 80px 0 90px;width:90%;height: 500px;"></iframe>
       	</div>
	</body>
</html>

 B.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>resize</title>
		<meta name="author" content="Administrator" />
		<!-- Date: 2013-08-30 -->
		<script>
			function resize() {
				var parentwh = parent.innerHeight;
				var parentww = parent.innerWidth;
				var parentscreenh = parent.screen.height;
				var parentscreenw = parent.screen.width;
				var gridDiv = document.getElementById("gridWropper");
				var got = gridDiv.offsetTop
				var winh = window.innerHeight;
				var winw = window.innerWidth
				var w = winh - got;

				var screenX = screenLeft;
				var screenY = screenTop

				var allFrames = parent.frames;
				var currentWin = null;
				for (var i = 0; i < allFrames.length; i++) {
					if (allFrames[i] == window) {
						currentWin = allFrames[i];
					}
				}
			}
		</script>
	</head>
	<body onresize="resize()">
		<div id="gridWropper" style="height:90%;width:100%;overflow:auto;border: 2px dashed black;word-break: break-all;"></div>
	</body>
</html>

 接下来如果要在A中访问B中的方法,首先得先判断B是否加载完成,加载完成后才能访问(这个太重要了)

 

 js

var iframe = document.getElementById("test");
            if (!/*@cc_on!@*/0) { //if not IE
                iframe.onload = function(){
                    alert("Local iframe is now loaded.chrome");
					alert(iframe.contentWindow.resize)
                };
            }
            else {
                iframe.onreadystatechange = function(){
                    if (iframe.readyState == "complete") {
                        alert("Local iframe is now loaded.ie");
                        //alert(iframe.document.getElementById("test"));
						alert(iframe.contentWindow.resize)
                    }
                };
            }

 

分享到:
评论

相关推荐

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

    通过上述示例和解释,我们可以看到在同源的情况下,使用jQuery操作iframe父页面中的元素和方法是可行的。这些操作对于动态加载内容到iframe以及进行父子页面间的交云非常有用。然而,对于跨域的问题,需要通过其他...

    完美解决iframe跨域问题

    3. **iframe跨域问题**:当iframe加载的页面与包含它的页面不在同一个域时,就会出现跨域问题,导致无法直接通过JavaScript进行通信,如获取iframe内的内容、设置iframe的属性等。 **二、iframe跨域的解决方案** 1...

    iframe跨域通信解决方法

    尤其是在使用`iframe`嵌入不同源的内容时,主页面往往无法直接与`iframe`内的内容进行交互,这就需要一种解决方案来实现跨文档消息传递。本文档将详细介绍如何在Vue项目或普通Web页面中利用`postMessage`API来实现`...

    layer弹窗:top.layer弹窗到父页面跨域解决办法

    在IT行业中,跨域问题是一个常见的挑战,尤其是在网页开发中,比如当我们在使用layer弹窗插件时,可能会遇到从子页面弹出一个窗口到父页面的情况。标题和描述所提及的是一个关于如何解决layer弹窗在跨域环境下的问题...

    原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    如果父页面和iframe页面不是同源的,那么在某些浏览器中通过JavaScript访问对方的DOM元素可能会遇到跨域访问控制(CORS)的限制。这时可能需要服务器端的支持,例如设置适当的CORS响应头,或者使用postMessage API...

    父窗口调用iframe子窗口方法

    如果`iframe`加载的页面与父页面不在同一个域名下,由于浏览器的同源策略限制,直接访问`iframe`的内容可能会被阻止。这时,我们需要使用`postMessage`和`message`事件来进行跨域通信。例如,父窗口发送消息: ```...

    JavaScript 跨域通信方法

    - **代理页面**:一种常见的解决方案是在子页面(通常是iframe中的页面)内嵌入一个代理页面(proxy.html),该代理页面位于与父页面相同的域下。由于同源策略,代理页面可以与父页面直接通信。子页面通过修改代理页面...

    iframe根据页面内容自适应高度和宽度

    1. **CSS属性**:`iframe`的`style`属性可以设置`height`和`width`为`auto`或`100%`,但这种方法通常不足以实现完全自适应,因为浏览器的安全策略会限制跨域访问内容的高度和宽度信息。 2. **JavaScript**:使用...

    JS操作iframe里的dom(实例讲解)

    然而,访问`iframe`内的方法并不像访问元素那样直接。如果`iframe`内的脚本定义了一个方法,我们不能直接通过`getIframe`返回的`document`对象来调用,因为`document`对象并不包含这些方法。正确的方式是通过`window...

    js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法

    当然,这种方法要求父页面和子iframe之间在相同域下,否则JavaScript的跨域限制将导致代码无法正常工作。通过这种方式,开发者可以灵活地控制页面中特定部分的更新,而不受全局页面刷新的影响。

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

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

    基于iframe的跨域与更新父窗体地址栏的解决方案.docx

    ### 基于iframe的跨域与更新父窗体地址栏的解决方案 #### 1. 需求介绍 在现代Web应用开发中,经常会出现需要在一个应用中嵌入另一个应用的情况,尤其是在需要集成第三方服务或功能时。本文档探讨了一个特定场景:...

    解决window.showModalDialog跨域返回值

    需要注意的是,虽然这种方法可行,但它依赖于特定的浏览器支持,可能不适用于所有现代浏览器,而且在某些情况下可能受到同源策略的进一步限制。因此,对于新项目,更推荐使用现代的API,如`window.postMessage`进行...

    解决showModalDialog 跨域 iframe

    这意味着,不同源的页面之间无法直接通过JavaScript进行通信,除非有适当的权限设置。 **showModalDialog的跨域问题** `showModalDialog`函数默认受到同源策略的约束,当尝试打开一个不同源的URL时,浏览器会阻止这...

    iframe中页面显示不全1

    在网页设计中,`&lt;iframe&gt;`元素是一种非常实用的工具,它允许我们在一个网页中嵌入另一个网页,比如展示文档、视频或者地图等。当遇到"Iframe中页面显示不全"的问题时,通常是由于iframe的尺寸设置不当或者与被嵌入...

    jquery点击按钮隐藏父页和引用页的iframe

    注意,由于同源策略的限制,只有当父页面和`iframe`页面位于同一域下时,才能直接通过`window.parent`访问父页面的DOM。如果它们位于不同域,你需要寻找其他方法,如使用`postMessage`进行跨域通信。 在实际应用中...

    asp.net结合html,javascript实现无刷新跨域数据提交

    iframe可以加载其他源的文档,并且在不同源之间保持独立的作用域,即父文档可以向iframe内嵌的页面发送消息,而不直接违反同源策略。 ### 实现无刷新跨域数据提交的步骤 首先,我们需要创建一个基本的HTML页面,...

    jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码

    在本文中,我们将会探讨如何在jQuery环境下实现一个特定功能,即如何将iframe中的页面元素弹出并在父页面上全屏化。这个过程涉及到了多方面的技术细节,包括jQuery的基本使用、iframe的特性、全屏API的兼容性处理...

Global site tag (gtag.js) - Google Analytics