javascript - 如何使用 window.location.href 从文档中转到 iframe 的内容 div
问题描述
我有一种情况,我想跳转到特定内容,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>
请帮助我提前谢谢!!!
解决方案
您正在窗口上设置位置。
window.location.href = '#content'+index;
IFrame 有自己的 window,您需要在那里设置位置:
document.getElementById('iframe').contentWindow.location.hash = 'content'+index;
此外,如果 IFrame src 来自另一个"Origin",您将无法访问其内容,这将不起作用。
推荐阅读
- jquery - 如何使用 jQuery unique 删除重复的元素?
- java - Spring Boot 结构:验证控制器或服务层中的图像大小?
- c# - 在自定义列表上实现 INotifyCollectionChanged
- angular - 合并多个 observables 并返回一个
- angular - Angular HTTP POST 请求被调用 4 次
- .net - 带有 Xamarin 的可移植库 - .NET Standard 与 UWP
- spring - Spring Boot 2 休眠搜索
- android - 使 AppBarLayout 下面的 tablayout 透明
- java - 静态变量默认初始化 vs 在代码中初始化
- azure - ARM 模板:有条件地添加到数组