如何将'offset'应用于iframe中的元素?

时间:2022-06-12 20:28:10

I want to navigate to a div inside an iframe using jQuery.animate from a link outside the iframe. This is the Code I use:

我想使用iframe外部链接中的jQuery.animate导航到iframe中的div。这是我使用的代码:

function scrollToAnchorIframe(aid){
  var aTag = window.frames['myFrame'].document.getElementById(aid);
  $('html,body').animate({scrollTop: aTag.offset().top - 62},'slow');
}

However, it doesn't work, logging the error "Object [object HTMLElement] has no method 'offset'". Is there a way to get the offset of the id to make it work?

但是,它不起作用,记录错误“Object [object HTMLElement]没有方法'offset'”。有没有办法获得id的偏移量才能使它工作?

Update (Solved): That's the code I'm using now:

更新(已解决):这是我现在使用的代码:

function scrollToAnchorIframe(aid){
  var aTag = window.frames['myFrame'].document.getElementById(aid);
  jQuery('html,body').animate({scrollTop: $(aTag).offset().top + $("#myFrame").offset().top - 62},'slow');
}

2 个解决方案

#1


4  

aTag is DOM element , make it jQuery object

aTag是DOM元素,使它成为jQuery对象

$('html,body').animate({scrollTop: $(aTag).offset().top - 62},'slow');

#2


0  

If the iframe is put inside a container box, here's an update in order to navigate up/down to the iframe's bookmark-anchor from the parent-page container (note: "window.frames" has a known compatibility bug with FF browser, so i'll use "contentWindow" instead):

如果将iframe放在容器盒中,这里是一个更新,以便从父页面容器向上/向下导航到iframe的书签锚点(注意:“window.frames”与FF浏览器有已知的兼容性错误,所以我将使用“contentWindow”代替):

function iframeBookmark(anchor) {
mytag = document.getElementById("iframeID").contentWindow.document.getElementById(anchor);
pos1 = $(mytag).offset().top;
pos2 = $("#iframeID").offset().top;
if (pos2 > pos1) {
    $("#iframeContainerID").animate({scrollTop: pos2 - (pos2 - pos1) },'slow');
    }
else {
    $("#iframeContainerID").animate({scrollTop: pos2 + (pos1 - pos2)  },'slow');
    }
}

So, when we call the function from the parent HTML, the up/down scroll depends to the iframe current position:

因此,当我们从父HTML调用函数时,向上/向下滚动取决于iframe当前位置:

 <a onclick="iframeBookmark('iframeBookmarkID')">...</a>

...where 'iframeBookmarkID' is the ID of the bookmark-anchor in the iframe page.

...其中'iframeBookmarkID'是iframe页面中书签锚的ID。

#1


4  

aTag is DOM element , make it jQuery object

aTag是DOM元素,使它成为jQuery对象

$('html,body').animate({scrollTop: $(aTag).offset().top - 62},'slow');

#2


0  

If the iframe is put inside a container box, here's an update in order to navigate up/down to the iframe's bookmark-anchor from the parent-page container (note: "window.frames" has a known compatibility bug with FF browser, so i'll use "contentWindow" instead):

如果将iframe放在容器盒中,这里是一个更新,以便从父页面容器向上/向下导航到iframe的书签锚点(注意:“window.frames”与FF浏览器有已知的兼容性错误,所以我将使用“contentWindow”代替):

function iframeBookmark(anchor) {
mytag = document.getElementById("iframeID").contentWindow.document.getElementById(anchor);
pos1 = $(mytag).offset().top;
pos2 = $("#iframeID").offset().top;
if (pos2 > pos1) {
    $("#iframeContainerID").animate({scrollTop: pos2 - (pos2 - pos1) },'slow');
    }
else {
    $("#iframeContainerID").animate({scrollTop: pos2 + (pos1 - pos2)  },'slow');
    }
}

So, when we call the function from the parent HTML, the up/down scroll depends to the iframe current position:

因此,当我们从父HTML调用函数时,向上/向下滚动取决于iframe当前位置:

 <a onclick="iframeBookmark('iframeBookmarkID')">...</a>

...where 'iframeBookmarkID' is the ID of the bookmark-anchor in the iframe page.

...其中'iframeBookmarkID'是iframe页面中书签锚的ID。