Question

我有iframe这样的

<iframe name="myframe1" id="myframe1" width="100%" height="100%" src="a.html">
<html>
    <head></head>
    <frameset name="myframe2" cols="0%, 100%" border="0" frameBorder="0" frameSpacing="0">
        <frame name="page1" src="c.html" scrolling="no"></frame>
        <frame name="page2" src="d.html" >
            <html>
                <head></head>
                <body id="top">
                    <div id="div1">
                        <div id="div2">
                            <div id="div3">
                                <ul id="x">
                                    <li>a</li>
                                    <li>b</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </body>
            </html>

        </frame>

    </frameset>
</html>
</iframe>

我想引用元素“x”。我尝试了几种方法，但我找不到解决方案。

Answer 1

document.getElementById('myframe1').contentWindow.document.getElementById('x')

Fiddle

所有浏览器都支持

contentWindow，包括旧版本的IE。

请注意，如果iframe的{{1}}来自其他域，则由于Same Origin Policy，您将无法访问其内容。

Answer 2

使用contentDocument来实现此目标

var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) 
               ? iframe.contentDocument 
               : iframe.contentWindow.document;

var ulObj = innerDoc.getElementById("ID_TO_SEARCH");

Answer 3

（这是添加到所选答案中的内容）

请确保先加载iframe

contentWindow.document

否则，您的getElementById将是null。

PS：无法发表评论，信誉仍然很低，无法发表评论，但这是对所选答案的跟进，因为我花了一些调试时间来尝试确定应该强制iframe加载在选择inner-iframe元素之前。

Answer 4

就我而言，我试图获取 pdfTron 工具栏，但不幸的是，每次刷新页面时，其 ID 都会更改。

所以，我最终还是这样做了。

const pdfToolbar = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('HeaderItems');

就像在tagName编写的数组中一样，您的应用程序中将始终具有iFrame的固定索引。

Answer 5

您需要确保框架已满载最好的方法是使用onload：

<!DOCTYPE html>
<html>
<head>
  <title>Sample</title>
  <meta charset="utf-8">
</head>
<body>
  <select name = 'pokeball2' id="pokeballType">
        <option value=1 selected = 'selected'>Pokeball</option>
        <option value=2>Ultra Ball</option>
        <option value=1.5>Great Ball</option>
        <option value=3.5>Dusk Ball if used inside cave</option>
        <option value=4>Quick ball if used on first turn</option>
        <option value='timerBall'>Timer Ball</option>
  </select>
    
  <script>
    let pokeball = document.getElementById("pokeballType");
    
    // Set up an even handler for when the value of the select changes
    pokeball.addEventListener("change", function(){
      if (pokeball.value === 'timerBall') {
        console.log('Working')
      }    
    });

  </script>
</body>
</html>

此功能将在iframe完全加载后自动运行。

这可以通过setTimeout完成，但是我们无法获得帧加载的确切时间。

希望这对某人有帮助。

如何使用document.getElementById在iframe中选择元素

5 个答案: