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

Question

我有一个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> 

这些bu这样它们将滚动到iframe中的适当位置？

Answer 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; 
}