Question

我正在尝试弄清楚如何选择，然后修改我生成的iframe内的HTML。 iframe显示各种媒体（图像，pdf等）。为了显示不同的项目，我最初使用以下内容创建它：

$('#mydiv').html("<iframe id='myiframe' src='path/file.jpg'></iframe>");

然后根据需要使用以下内容更新其内容：

$('#myiframe').attr("src","path/newfile.jpg");

这会产生这样的HTML（通过Chrome的元素查看器看到）：

<div id='mydiv'>
  <iframe id='myiframe' src='path/file.jpg'>
    #document
      <html>
        <body style="margin:0">
          <img style="-webkit-user-select:none" src="path/file.jpg">
        </body>
      </html>
  </iframe>
</div>

我想选择动态生成的<img>标记，以便我可以调整其宽度。但我无法找出jquery选择器来做到这一点。想法？

Answer 1

使用jQuerys contents方法。文档甚至有一个标题为“更改iframe内部链接的背景颜色”的示例。

获取匹配元素集中每个元素的子元素，包括文本和评论节点。

应用于您的代码：

var images = $('#myiframe').contents().find('img');

真正的问题是为什么你首先需要iframe？

Answer 2

您需要先获取iFrame的内容：

$("#myiframe").contents().find('img');

Answer 3

如果您只想动态更改容器中的图片，则不需要iframe。

你只需要在你自己的html上有一个img标签就可以更新它的src属性。

$('#my-image')
    .attr('src', '/path/to/image')
    .attr('width', '100px')
    .attr('height', '100px');

除非您没有告诉我们为图像生成iframe的充分理由。在调用来自其他域的网址时，使用这样的iframe可能会很痛苦

如何使用jquery在iframe中选择标签？

3 个答案: