使用 js getElementById 定位 iframe 以进行箭头导航答案

【问题标题】：targeting an iframe with js getElementById for arrow navigation使用 js getElementById 定位 iframe 以进行箭头导航
【发布时间】：2024-04-20 17:55:01
【问题描述】：

我看到了许多非常相似的问题，但它们似乎并没有解决我遇到的特殊情况，但如果我错过了，请随时向我指出其中一个问题。

我有一个网站，它使用 iframe 来显示内容 html（来自同一个域）。我在 iframe 内容 html 中有后退和下一个按钮，以允许查看上一个/下一个内容，而无需关闭 iframe 来选择上一个/下一个。我想要为此添加箭头键功能，这样他们就可以通过键盘进入上一个/下一个内容页面。我设法让它在内容 html 上工作，但它仅在内容 html 自身加载到新选项卡中时才有效 - 但它作为 iframe 失败。我假设我在这里有一个定位问题。 理想情况下我只在 iframe 打开时才需要此功能，但如果它需要进入根 html，我会很灵活。

这是我所拥有的： JS-arrowsprevnext.js

   var key = e.which||e.keyCode;
   switch(key){
      //left arrow
      case 37:
         document.getElementById("prevLink").click();
      break;
      //right arrow
      case 39:
         document.getElementById("nextLink").click();
      break;
   }
});

主HTML：

<a class='iframe' id="portfolioframe" href="portfolio_SaurianTerrain.html"><img class="image" src="img/TH_Saurian01.jpg"></a>
<a class='iframe' id="portfolioframe" href="portfolio_SaurianBiomes.html"><img class="image" src="img/TH_Saurian02.jpg"></a>
<a class='iframe' id="portfolioframe" href="portfolio_DinosaurValley.html"><img class="image" src="img/TH_FallOfTheDinosaurs_med.jpg"></a>
<a class='iframe' id="portfolioframe" href="portfolio_Halo5_01.html"><img class="image" src="img/TH_Halo501.jpg"></a>
<a class='iframe' id="portfolioframe" href="portfolio_LastSentinel.html"><img class="image" src="img/TH_LastSentinel.jpg"></a>
<a class='iframe' id="portfolioframe" href="portfolio_Murdered.html"><img class="image" src="img/TH_Murdered02.jpg"></a>
<a class='iframe' id="portfolioframe" href="portfolio_VictorianHouse.html"><img class="image" src="img/TH_VictorianHouse.jpg"></a>
<a class='iframe' id="portfolioframe" href="portfolio_AnimalSketches.html"><img class="image" src="img/TH_SketchAnimals01a.jpg"></a>

iframe Html:

<script src="js/arrowsprevnext.js"></script>
...
...
...
<a id="prevLink" href="portfolio_DinosaurValley.html"><img src="img/prev.png"></a>

为了了解更多历史，我发现了一个带有箭头导航的 iframe 的预制脚本（灯箱），适用于单个图像（我在我的大部分网站中都使用它）。我发现了另一个脚本（颜色框），它在 iframe 中做了很多事情，但不能用 html 到 iframe 中进行箭头导航。

谢谢，克里斯

【问题讨论】：

.click(); 我假设你在这里使用 jQuery？
我想是的，但我不确定
虽然我想要一些优雅的东西（箭头键转到 iframe，找到 id 'prev' 或 'next' 并执行那里关联的任何链接），但我可以想象索引中存在更复杂的东西.html （因为我知道代码在那里工作），但它可能必须合并一个变量来跟踪 iframe 当前显示的页面，以及一些防止 iframe 未启动时触发的方法。不理想（尤其是因为它几乎肯定超出了我的能力），但如果它有效....
更新：我的代码有效，但只有在我先点击 iframe 中的某个位置之后

标签： javascript iframe navigation getelementbyid arrow-keys

【解决方案1】：

所以问题在于 iframe 没有专注于创建。到目前为止，我正在像大多数其他人一样解决它 - 在顶部添加一个按钮： button id="focalpoint" "x"<"/button"> 并将该 id 添加到被调用的 url： <a class='iframe' id="portfolioframe" href="portfolio_Halo5_01.html#focalpoint"><img class="image" src="img/TH_Halo501.jpg"></a>

我尝试在 url 中添加一个 div id，但由于某种原因这不起作用，所以我会坚持使用 1px 按钮 w。一个身份证。

【讨论】：