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

最新推荐文章于 2022-11-22 14:34:50 发布

wangzhantao

最新推荐文章于 2022-11-22 14:34:50 发布

阅读量523

点赞数

分类专栏： web 前端处理文章标签： iframe

本文链接：https://blog.csdn.net/wangzhantao/article/details/84269908

版权

web 前端处理专栏收录该内容

57 篇文章 0 订阅

订阅专栏

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 οnlοad="parent.location.hash='top'">

获取iframe的window 与document 或者

wangzhantao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js jquery IFrame父子页面处理以及锚点理解

parent.frames["frameName"].window.functionName();frameName:IFrame的ID;funtionName:子页面中JS方法名;var obj = parent.frames["frameName"].window;在父页面访问子页面中某个控件如:obj.document.getElementById('clientID...
复制链接

扫一扫