2

如何滚动到 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”&gt;</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”&gt;
   [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”&gt;
    var myFrm = document.getElementById('strytl');
    var myCw  = myFrm.contentWindow;
    myCw.parentIFrame.moveToAnchor(‘somewhere_name’);
</script>

结果：

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

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

4

1 回答 1

0

像这样的东西。

<script type="text/javascript">
    iFrameResize({
        heightCalculationMethod : 'lowestElement',
        inPageLinks             : true,
        initCallback            : function (iFrame){
            iFrame.iFrameResizer.moveToAnchor('someAnchor');
        }
     });
</script>
于 2016-02-10T21:29:04.697 回答