`

js jquery IFrame父子页面处理 以及锚点 理解

阅读更多
parent.frames["frameName"].window.functionName();
frameName:IFrame的ID;
funtionName:子页面中JS方法名;

var obj = parent.frames["frameName"].window;
在父页面访问子页面中某个控件如:obj.document.getElementById('clientID')

子页面刷新父页面:top.window.location.replace(Url);

$(window.frames["iframeChild"].document).find("iframe[name='list']").attr("src");
意思是找到name=iframeChild的frame并且找到这个iframe中name=list的元素。
 
例子:

 子页面访问父页面的对话框:parent.document.saveform.userName.value='${userName}';
子页面刷新父页面:        parent.document.location.reload();
子页面访问父页面中js方法: parent.parent.checkFunc();

出自:
http://mybloggers.blog.163.com/blog/static/100386509200810553548856/

 

 

 

1 获得iframe的window对象
存在跨域访问限制。
chrome:iframeElement. contentWindow 
firefox: iframeElement.contentWindow 
ie6:iframeElement.contentWindow

function getIframeWindow(element){        
    return  element.contentWindow;  
} 

2. 获得iframe的document对象
存在跨域访问限制。
chrome:iframeElement.contentDocument
firefox:iframeElement.contentDocument
ie:element.contentWindow.document
备注:ie没有iframeElement.contentDocument属性。

var getIframeDocument = function(element) {  
    return  element.contentDocument || element.contentWindow.document;  
};  

4. 获得iframe在父页面中的html标签
存在跨域访问限制。

window.frameElement(类型:HTMLElement),适用于所有浏览器


5. iframe的onload事件

var ifr = document.createElement('iframe');  
ifr.src = 'http://b.a.com/b.php';  
if (ifr.attachEvent) {  
    //IE 只支持  attachEvent
    ifr.attachEvent('onload',  function(){ alert('loaded'); });  
} else {  
    //其余浏览器支持
    ifr.onload  = function() { alert('loaded'); };  
}  
document.body.appendChild(ifr);  

6 iframe 的 element 
window.frames可以取到页面中的帧(iframe、frame等),需要注意的是取到的是window对象,而不是HTMLElement。

var ifr1 = document.getElementById('ifr1');  
var ifr1win = window.frames[0];  
ifr1win.frameElement === ifr1;   // true  
ifr1win === ifr1;    // false  

  

 

  页面上锚点处理

1、最好是name和id都是st。避免有些特殊情况
<a href="#ST">跳转到st</a>
<a name="ST"></a>


2、javascript脚本来控制跳到锚点,普通定位方式是在地址后面加上#ST即可,现想通过JS实现定位,代码如下
window.location.hash="ST"   //  "ST" 为锚点的名字

3、iframe通过锚点控制父页面的位置
iframe通过锚点控制父页面的位置,答案就是在iframe中的子页面中加上代码:
注意 这里的'top'是父级页面的锚点名称
<body onload="parent.location.hash='top'">

获取iframe的window 与document 或者

 

 

 

   

 

 

 

分享到:
评论

相关推荐

    jQuery插件 jQuery 实现网页报纸的区域锚点提示功能

    3. **事件监听(Event Handling)**:jQuery 提供了 `.on()` 方法来监听各种用户事件,如 `scroll` 事件,当用户滚动页面时,可以触发相应的处理函数。 4. **元素定位(Element Positioning)**:利用 jQuery 的 `....

    jQuery侧边栏固定层锚点定位代码.rar

    jQuery侧边栏固定层锚点定位代码.rar jQuery侧边栏固定层锚点定位代码.rar jQuery侧边栏固定层锚点定位代码.rar jQuery侧边栏固定层锚点定位代码.rar jQuery侧边栏固定层锚点定位代码.rar jQuery侧边栏固定层锚点...

    jQuery汽车品牌按字母分类锚点导航代码

    首先,我们需要了解**jQuery**,它是一个轻量级的JavaScript库,简化了JavaScript的事件处理、动画设计和Ajax交互。在这个案例中,jQuery用于监听用户的点击事件,处理锚点链接,并实现平滑的页面滚动效果。 **按...

    jQuery制作在线答题考试页面锚点特效代码.zip

    jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。通过利用jQuery的特性,我们可以构建一个用户友好的、响应式的考试平台。 首先,让我们了解锚点在网页中的作用。锚点...

    jQuery页面滚动显示浮动菜单栏锚点定位效果

    在网页设计中,jQuery是一种广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本主题聚焦于利用jQuery实现一个特定的功能——当页面滚动时,展示一个浮动菜单栏,并实现锚点定位效果。这个功能...

    jQuery页面内滑动到锚点导航效果,回到顶部

    本主题将深入探讨如何使用jQuery实现页面内滑动到锚点导航以及添加“回到顶部”的功能。 首先,锚点导航是网页设计中一个常见的功能,允许用户通过点击链接直接跳转到页面内的特定位置。在HTML中,我们可以通过设置...

    JS如何实现在页面上快速定位(锚点跳转问题)

    JS实现页面快速定位的技术主要涉及锚点跳转的概念和应用。锚点,也被称作片段标识符,其作用是允许用户点击链接后页面能够跳转到特定的位置。在网页设计中,尤其是在内容较多、页面较长的情况下,合理使用锚点可以...

    jquery网页浮动导航点击锚点链接屏幕滚动.zip

    通过研究和理解这些代码,你可以学习到如何创建一个功能完善的浮动导航系统,以及如何处理锚点链接的点击事件以实现平滑的屏幕滚动效果。 总的来说,这个项目涵盖了网页开发中的两个重要技术点,对于提升网站用户...

    jQuery实现的回到首页带锚点代码.rar

    jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务,使得开发者能够更加高效地编写代码。 首先,理解锚点的概念。在HTML中,锚点允许我们为页面上的特定位置创建链接。通过使用`...

    jQuery汽车品牌按字母分类锚点导航代码.zip

    `js`文件夹则包含JavaScript和jQuery代码。核心的jQuery代码可能包括以下几个部分: 1. **事件绑定**:jQuery的`.on()`方法用于绑定点击事件到导航链接上,当用户点击某个字母时,对应的汽车品牌会被显示。 2. **...

    <jQuery>导航的滚动锚点

    在网页设计中,导航是用户在页面间跳转的重要工具,而滚动锚点则是导航功能的一种增强,使得用户可以通过点击导航菜单直接跳转到页面内的特定位置。在jQuery库的支持下,实现滚动锚点变得更加简单高效。本文将深入...

    原创左右两列框架锚点滚动Jquery插件

    首先,我们要理解Jquery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。在这个插件中,Jquery被用来实现页面元素的锚点滚动效果。锚点链接(Anchor Links)是HTML中的一个重要概念,它...

    jquery实现滚动与动态锚点

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本文将详细探讨"jquery实现滚动与动态锚点"这一主题,这在网页开发中是非常常见且实用的功能。 首先,我们...

    用jquery修复在iframe下的页面锚点失效问题

    通过上述方法,我们可以利用jQuery来修复在iframe下页面锚点失效的问题,使得用户在点击链接时,无论是在父页面还是在iframe页面,都能够正确地滚动到指定的锚点位置。这对于提高用户体验是非常有帮助的,尤其是在...

    jQuery点击滑动到锚点.rar

    在网页设计中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务。"jQuery点击滑动到锚点"是jQuery的一个常见应用,主要用于实现页面内的平滑滚动效果。当用户点击链接时,页面会...

    jQuery按需加载图片及锚点定位效果.rar

    在前端开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。本教程将深入探讨如何使用jQuery实现按需加载图片和锚点定位效果,这两个特性对于提高网页性能和用户体验...

    jQuery实现平滑滚动页面到指定锚点链接的方法

    总结起来,jQuery实现平滑滚动页面到指定锚点链接的关键在于利用事件处理(`click`事件)、DOM操作(获取`href`属性)以及第三方插件提供的平滑滚动方法。这种方法能够提升用户体验,使页面导航更加流畅。同时,...

    jQuery锚点带动画跳转特效.zip

    jQuery锚点带动画跳转特效是一种常见的网页交互设计,它能够使用户在页面内点击链接时,不仅快速定位到相应内容,还能配合动画效果,提升浏览体验。尤其在购物商城网站、素材网站等需要频繁定位模块的场景下,这种...

    JS锚点平滑跳转

    JS锚点平滑跳转则通过JavaScript代码来改善这一情况,使得页面滚动更加自然流畅。 一、基本原理 JavaScript锚点平滑跳转的核心在于监听锚点链接的点击事件,然后使用`window.scrollTo`方法或者CSS3的`scroll-...

Global site tag (gtag.js) - Google Analytics