Question

如何滚动到IFrame页面内的某个锚标签？

使用David J. Bradshaw的巧妙的Iframe-Resizier图书馆 https://github.com/davidjbradshaw/iframe-resizer 我在外部页面中包含了一个包含大量内容（=长页面）的IFrame。因此，如果我链接到该页面，那么大部分内容在第一个屏幕上都不可见，并且在某些情况下我想跳转到iframe中的特定锚标签。

<html>
    <a href=“outer-page.html#somewhere_name” />
</html>

似乎无法正常工作

我正在使用“inPageLinks：true”，如下所示：

<script type="text/javascript">
    iFrameResize({
        heightCalculationMethod: 'lowestElement',
        inPageLinks: true
</script>

我现在的问题是：如何让外页向下滚动到某个锚标签，而无需在iframe页面内实现新内容？在这种情况下，锚标记位于IFrame页面内。

当我包含像

这样的IFrame页面时

<html>
    <iframe id=“strytl” src=“iframe-page.html#somewhere_name”></iframe
</html>

然后IFrame的（重新）大小似乎不能完美地工作，iframe顶部的内容会被切断。

但是使用moveToAnchor它可以在IFrame中完美地工作，并且页面神奇地向下滚动到锚标记。所以在iframe页面中我可以调用：

<script type="text/javascript>
    parentIFrame.moveToAnchor('somewhere_name’);
</script>

但是如何从父页面触发？

<script type="text/javascript>
    $('iframe#strytl').iFrameResize({moveToAnchor: 'somwhere_name'});
</script>

导致此错误：

<script type=“text/javascript”>
   [iFrameSizer][Host page: strytl] Ignored iFrame, already setup.and
</script>

并且

<script type="text/javascript">
    iFrameResize({
        heightCalculationMethod: 'lowestElement',
        inPageLinks: true,
        moveToAnchor: 'somewhere_name'});
</script>

似乎根本没有效果。

（在这种情况下，外部页面和iframe具有不同的服务器名称。）

<script type=“text/javascript”>
    var myFrm = document.getElementById('strytl');
    var myCw  = myFrm.contentWindow;
    myCw.parentIFrame.moveToAnchor(‘somewhere_name’);
</script>

结果：

<script type=“text/javascript”>
   Error: Permission denied to access property “parentIFrame"
</script>

我可以从外页跳转到iframe中的锚吗？

Answer 1

像这样的东西。

<script type="text/javascript">
    iFrameResize({
        heightCalculationMethod : 'lowestElement',
        inPageLinks             : true,
        initCallback            : function (iFrame){
            iFrame.iFrameResizer.moveToAnchor('someAnchor');
        }
     });
</script>

iframe-resizer js library：来自父页面的moveToAnchor

1 个答案: