如何使用 window.location.href 从文档转到内容 div 以获取 iframe

Question

>我遇到一种情况，我想跳转到带有window.location.href = id的特定内容，但它适用于普通页面，但在iframe内不起作用

问题：如何在iframe中跳转到该特定内容

这是JSFIDDLE：http://jsfiddle.net/TH48e/3289/

以下是完整代码：

var $iframe = $('#iframe');
$iframe.ready(function() {
$iframe.contents().find("body").append(

`<div id="content1"> CONTENT 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam laborum, dolore iusto expedita accusamus, minima temporibus cum, doloremque ullam non incidunt quam earum ducimus iure sapiente dicta. Laborum, consequuntur, rerum! <hr/></div>

<br>

<div id="content2"> CONTENT 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam laborum, dolore iusto expedita accusamus, minima temporibus cum, doloremque ullam non incidunt quam earum ducimus iure sapiente dicta. Laborum, consequuntur, rerum! <hr/></div>

<br>

<div id="content3"> CONTENT 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam laborum, dolore iusto expedita accusamus, minima temporibus cum, doloremque ullam non incidunt quam earum ducimus iure sapiente dicta. Laborum, consequuntur, rerum! <hr/></div>

<br>

<div id="content4"> CONTENT 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam laborum, dolore iusto expedita accusamus, minima temporibus cum, doloremque ullam non incidunt quam earum ducimus iure sapiente dicta. Laborum, consequuntur, rerum! <hr/></div>

<br>` );


// above iframe creation code 

//actual code
var index = 0;

$('#loopcontent').on('click',function(){
index++;
if(index > 4) index = 0;
console.log('content id','#content'+index);
window.location.href = '#content'+index;
});


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="iframe"></iframe>
<button id="loopcontent">
go to content
</button>

请提前帮助我谢谢!!

Answer 1

您正在设置窗口上的位置。

window.location.href = '#content'+index;

IFrame有自己的窗口，您需要在那里设置位置：

document.getElementById('iframe').contentWindow.location.hash = 'content'+index;

此外，如果 IFrame src 来自另一个"源"，您将无法访问其内容，这将不起作用。

Answer 2

您可以使用javascript将所需的div滚动到视图中，如下所示：

$('#loopcontent').on('click',function(){
index++;
if(index > 4) index = 1;
$iframe_window = $iframe.contents();
var $div = $iframe_window.find('#content'+index);
$iframe_window.find('body').scrollTop($div.offset().top);
});

在这里看jsFiddle