javascript - 如何使用 window.location.href 从文档转到 iframe 的内容 div

标签 javascript jquery

我遇到了一种情况,我想跳转到 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 有 its own window ,您需要在那里设置位置:

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

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

关于javascript - 如何使用 window.location.href 从文档转到 iframe 的内容 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52773730/

相关文章:

javascript - 需要相同的模块,不同的路径,变量不共享

jquery - 如何判断 jquery tmpl 中是否存在子属性

jquery - 查找 rails 中的日期差异

javascript - 使用 Javascript 查找不同域上的元素属性

javascript - 不确定是什么影响按钮显示 - 已更新

javascript - Javascript 中一个类的所有实例的公共(public)回调

jquery - 如果勾选了复选框则执行此操作,取消选中则执行此操作

javascript - 打印到纸张的特定区域 C#

javascript - Next Previous 按钮和下拉框在内容 slider 中协同工作

javascript - 全局变量和全局对象的属性之间有什么区别吗