如何滚动到 iframe 中的特定 div？

Posted 2023-03-05

【中文标题】如何滚动到 iframe 中的特定 div？

【英文标题】：How do you scroll to a specific div in an iframe?

【发布时间】：2017-08-13 08:34:07

【问题描述】：

我有一个带有 iframe 的 div，如下所示：

<div>
    <iframe ng-src="somesourceurl"></iframe>
</div>

由 iframe 加载的源代码具有带有唯一标识的 div 标签的 html，如下所示：

<div id="n_1">
    <div id="n_2" />
    <div id="n_3" />
    <div id="n_4">
        <div id="n_5" />
    </div>
</div>

我还有一堆按钮，它们对应于这些唯一标记的 div 中的每一个，如下所示：

<button onclick="goToN1()">Go To n1</button>
<button onclick="goToN2()">Go To n2</button>
<button onclick="goToN3()">Go To n3</button>
<button onclick="goToN4()">Go To n4</button>
<button onclick="goToN5()">Go To n5</button>

我在我的 onclick 函数中为这些按钮中的每一个添加了什么，以便它们滚动到 iframe 中的适当位置？

【参考方案1】：

我认为您可以更改iframe 的src 以使浏览器滚动到带有id 的元素：

HTML 1

<div>
    <iframe id="my-iframe" ng-src="somesourceurl"></iframe>
</div>

HTML 2

<button onclick="goToId('n_1')">Go To n1</button>
<button onclick="goToId('n_2')">Go To n2</button>
<button onclick="goToId('n_3')">Go To n3</button>
<button onclick="goToId('n_4')">Go To n4</button>
<button onclick="goToId('n_5')">Go To n5</button>

javascript

function goToId(id) 
    var iframe = document.getElementById("my-iframe");
    var src = iframe.src;
    if(src.indexOf('#') >= 0) src = src.substr(0, src.indexOf("#"));
    iframe.src = src + "#" + id;

【讨论】：

我建议在您的代码中将 onclick 更改为 ng-click。

@Mistalis 为什么？？