强制 iframe 滚动到 Firefox 中查询字符串传递的锚点

Posted 2023-05-09

【中文标题】强制 iframe 滚动到 Firefox 中查询字符串传递的锚点

【英文标题】：force an iframe to scroll to anchors passed by querystring in Firefox

【发布时间】：2018-02-23 05:07:48

【问题描述】：

我有一个 php 页面 A，在这个页面内我有一个 iframe，其来源（属性 src=""）如 <iframe id="iframe_book" name="iframe_book" src="book.html"></iframe>

“book.html”是一个页面，其中包含大量文本，分为多个部分，并且在每个文本块之前包含 html 锚 (<a name="anchor-1"></a>)

我有另一个 php 页面 B，其表单将变量 (#anchor-1)（即锚名称）传递给页面 A。

在页面 A 中，我将此变量传递给 iframe，编辑 iframe 的源代码：<iframe id="iframe_book" name="iframe_book" src="book.html#anchor-1"></iframe>

所以我希望 iframe 中的 book.html 页面会滚动到传递的锚点，就像通常的 html 页面一样。 我希望这适用于所有浏览器； Chrome 可以工作（iframe 滚动到锚点），但 Firefox 不行。

问题是：如何，可能使用 javascript 或 jquery？

我找到了在 iframe 页面“book.html”内强制使用带有链接的锚点的解决方案，但不适用于查询字符串传递的锚点。

火狐问题： https://bugzilla.mozilla.org/show_bug.cgi?id=638598

在 iframe 页面内强制使用带有链接的锚点： http://matthewmanela.com/blog/making-linking-between-anchors-in-an-iframe-work-in-firefox-11-and-above/

【问题讨论】：

这是一个基于纯 Javascript 的解决方案。 link

试过但没用。我在页面 A 中添加了这个脚本：function scroll_anchor(anchor) var childWindow = document.getElementById("iframe_id").contentWindow; if( childWindow.document.getElementById(anchor) != null ) childWindow.scrollTo(0,childWindow.document.getElementById(anchor).offsetTop); <?php if( $request_anchor != '' )?> scroll_anchor('<?php echo substr($request_anchor,1); ?>'); <?php ?>

【参考方案1】：

我解决了在 iframe 标记之后将此脚本添加到页面 A 中。

<?php
        //#anchor-1
        $anchor = isset($_REQUEST['anchor']) ? $_REQUEST['anchor'] : '';
        if( $anchor != '' )
?>
        <script type="text/javascript" language="Javascript">
        function scroll_anchor(anchor)
        parent.frames['iframe_book'].location.href = "book.html?"+anchor+"";
        
        window.onload = function()
            <?php echo "scroll_anchor('".$anchor."');"; ?>
        
        </script>
<?php  ?>