Question

有没有办法在不使用ID的情况下访问html iframe。我有一个动态生成的iframe，每次刷新页面时都会获得一个新的id。我正在尝试动态调整iframe的大小，因为浏览器已调整大小，但似乎无法弄清楚如何使用jQuery访问iframe。

Answer 1

如果您可以控制它的生成位置，我建议将其包装在父级中并相对于此进行定位。

<div id="frameGoesHere">
    ...
    <iframe id="unknownDynamicallyGeneratedID"></iframe>
    ...
</div>

然后：

$('#frameGoesHere > iframe').function(){ /* stuff */ }

Answer 2

您可以通过一百种不同的方式使用替代选择器，此演示通过以下方式显示了3种方法：

标签选择器
班级选择器
属性选择器

处理iframe时，一个重要的事情是加载需要很长时间（当然相对而言），因此请将您的函数置于window.onload或使用setTimeout。

DEMO

<强>父

<!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            box-sizing: border-box;
            font: 400 16px/1.45 "Verdana";
            height: 100vh;
            width: 100vw;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
            margin: 0;
            padding: 0;
            border: 0 none hlsa(0%, 0, 0, 0);
            outline: 0 none hlsa(0%, 0, 0, 0);
        }

        body {
            position: relative;
            background-color: #111;
            color: #EEE;
            padding: 10px;
        }

        label {
            display: block;
            color: yellow;
            margin: 5px 0;
        }

        iframe {
            height: 210px;
            width: 600px;
            overflow: hidden;
            background: white;
        }

        fieldset {
            width: 600px;
            border-radius: 10px;
            padding: 5px;
        }

        legend {
            font-size: 1.3rem;
            font-variant: small-caps;
            color: yellow
        }
    </style>
</head>

<body>
    <section class="jFrame">
        <iframe id="i-Cant" name="iName" class="iClass" src="child.html"></iframe>
    </section>

    <fieldset>
        <legend>Alternate Selectors</legend>
        <label for="out1">Tag </label>
        <output id="out1"></output>
        </label>
        <label for="out2">Class </label>
        <output id="out2"></output>

        <label for="out3">Attribute </label>
        <output id="out3"></output>

    </fieldset>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
            window.onload =  setTimeout(function() {

            // Selector: tag
            var targetTag = $('iframe').contents();

            // Selector: class
            var targetClass = $('.iClass').contents();

            // Selector: attribute 
            var targetAttribute = $('[name]').contents();

            var iTag = targetTag.find('article').text();
            var iClass = targetClass.find('.content').text();
            var iAttribute = targetAttribute.find("[title]").text();

            $('#out1').val(iTag);
            $('#out2').val(iClass);
            $('#out3').val(iAttribute);
        }, 3000);

    </script>
</body>

</html>

<强> child.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
</head>

<body>
<article  class="content"  title="Use Any Selector">This is the text that's targeted by the parent page by accessing the iframe with a tag, class, and attribute selector</article>
</body>
</html>

Answer 3

只需为所有iframe提供唯一的 ID 即可。这样，您就可以选择<iframe onClick="resize('iframe1');" id="iframe1" />的所有iframe。如果您只想选择其中一个，那么您可以为每个iframe添加一个onClick事件，它会告诉您自己的id：

function resize(id) {
  $('#' + id).css('height', '100px'); 
}

npm install tsd -g

使用没有id的JQuery访问iframe

3 个答案: