访问 iframe src 中的 div 元素答案

【问题标题】：Access div element inside iframe src访问 iframe src 中的 div 元素
【发布时间】：2014-09-15 12:14:30
【问题描述】：

我正在尝试创建按钮来上下滚动 div。我已经下载了名为 vectordiv.js 的 javascript 文件（来自这里：http://www.scripterlative.com/files/vectordiv.htm）。

javascript文件可以在这里预览：http://ozesports.net.au/jscripts/vectordiv.js

我可以完美地使用测试 div。 JS文件顶部有注释说明如何使用，但基本上你调用：

vectorDiv('controll element id', 'div id', "滚动方向");

例如，我有一个带有 src="index.php" 的 iFrame... 在 index.php 中我有几个 div。当我尝试通过 div 的名称（'currentroom_left'）时，我从 JS 收到一条消息，说

未找到 ID 为“currentroom_left”的元素。必须配置脚本在所有相关元素的下方。

我的脚本位于我的 iframe 代码和控制按钮下方，但是，这个 javascript 文件似乎无法访问 iframe src 中的元素...所有文件都在同一个域中，但不在同一个域中目录（不确定这是否重要）。

这是代码中找不到我的 div id 的部分：

this.$ = function( id )
{
  var elem = document.getElementById( id );

  if( !elem || elem.id !== id )
  {
    elem = null;
    alert( 'Element with ID "' + id + '" not found.\n\nScript must be configured at a point BELOW all involved elements.' );
  }

  return elem;
}

我不打算在其他任何地方使用它，所以我在 JS 中硬编码我的 iFrame id 没有任何问题。我尝试将其更改为：

this.$ = function( id )
{
  var elem = document.getElementById('ozechat_iframe').contentWindow.document.getElementById( id );

  alert(elem);

  if (elem == null)
  {
       var elem = document.getElementById( id );
  }

  alert(elem);

  if( !elem || elem.id !== id )
  {
    elem = null;
    alert( 'Element with ID "' + id + '" not found.\n\nScript must be configured at a point BELOW all involved elements.' );
  }

  return elem;
}

这似乎停止了错误，但没有滚动内部 div...有什么想法吗？

【问题讨论】：

你能给我看看 urs in fiddle 的输出吗..
我认为你不能直接访问 iframe 的内容。
如果你想在 iframe 中找到一个元素，你必须确保 iframe 已经完成加载，然后你必须从 iframe 中获取文档并在该文档中搜索 - 这是不同的文档而不是包含 iframe 的文档。

标签： javascript jquery html iframe scroll

【解决方案1】：

您选择的库似乎不适用于跨框架情况。所以你可以做的是：

在 iframe 中实现相同的流程
在顶层添加一个按钮，基本上点击 iframe 内的按钮
在 iframe 中隐藏按钮

类似这样的：主要：

<html>
<body>
<button id="btn" onclick="document.getElementById('frm').contentWindow.document.getElementById('btn').click()">Scroll</button>
<iframe src="frm.html" id="frm" />
</body>
</html>

内嵌框架：

<html>
<body>
<button id="btn" style="display:none">Scroll</button>
<div id="scrlDiv" style="height:100px">
<div style="height:600px">Scroll me</div>
</div>
<script type='text/javascript' src='vectordiv.js'></script>
<script type='text/javascript'>      
   vectorDiv( 'btn', 'scrlDiv', "down" );      
</script>
</body>
</html>

【讨论】：