Question

enter image description here 我有一个iframe

<iframe src="../Images/landingpage.jpg" id="Iframe1" name="ifrmContent" class="ifrmClass">
</iframe>

我在inspector元素中发现img标签位于“#document”中，它带有body标签

<html>
    <body style="margin: 0px;">
        <img style="-webkit-user-select: none;" src="../Images/landingpage.jpg">
    </body>
</html>

我需要访问这个img（“landingpage.jpg”）才能更改（图片很小......需要调整大小），其宽度为100％，高度为：90％

我尝试过使用#Iframe1>#document>html>body>img{width:100%;}

Answer 1

尝试

$("#Iframe1").contents().find("img").css({
    'width': '100%',
    'height': '90%'
});

.css()

.find()

.contents()

Answer 2

你可以这样做：

$('#Iframe1').contents().find('img').css({'width':'100%','height':'90%'});

.contents()将为您提供iframe的内容，.find()会找到您的图片，.css()用于将样式应用于找到的图片。

Answer 3

非jQuery选项

此问题与this one

非常相似

根据上面链接中的回答问题，您可以尝试：

var image = window.frames['Iframe1'].document.getElementByTagName('img')[0];
image.styles.width = '100%';
image.styles.height = '90%';

Answer 4

您正在使用iframe加载图片。有文档＆gt; html-＆gt; body-＆gt; img的原因是因为您的浏览器将图像请求格式化为正确的HTML。

这可能很明显（而不是你所追求的），但对于这个特殊的请求，你应该使用img标签：

<img src="../Images/landingpage.jpg" id="img1" alt="Image 1">

然后，您可以轻松更改宽度和高度，就像您站点中的任何其他元素一样。

Answer 5

确保在iframe完成加载后完成$（＆＃34;＃Iframe1＆＃34;）选择器。

$(function() {
    $("#Iframe1").contents().find('img').css({'width':'100%', 'height':'90%'});
});

或为了便于阅读

$(document).ready(function() {
    $("#Iframe1").contents().find('img').css({'width':'100%', 'height':'90%'});
});

Answer 6

$('#Iframe1').contents().find('img').css({'width':'100% !important','height':'90% !important'});

以防高度被类分配覆盖。

Answer 7

#document 只是您的浏览器生成的虚拟文档，因为您直接指向图像 - 因此您无法通过此ID外观标记访问它。

你不能只调整iFrame的大小吗？

$('#Iframe1').css({
  'width'  : '100%', 
  'height' : '90%'
});

你可能需要一些CSS，因此iFrame中的图像总是和iFrame一样大：

iframe img {
  height: 100%;
  width: 100%;
}

Answer 8

如果iframe中加载的资源位于您的域中你可以用jquery的

来修改它

.contents().find('img').css()

但如果从其他域加载，则无法使用客户端脚本

访问它

Answer 9

无需访问iframe，只需使用CSS3。

将这些属性添加到正文或html（位于iframe中）。

background: url("../Images/landingpage.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

http://css-tricks.com/perfect-full-page-background-image/

无论如何，如果你提供纯Javascript，你可以这样做：

//Remember than the element should support percentage height.
var tmp = window.frames['IframeID'].document.getElementById('ImgID').styles;
tmp.width="100%";
tmp.height="90%";

另外，在jquery中：

$('#Iframe1').contents().find('img').css({'width':'100%','height':'90%'});

https://stackoverflow.com/a/22953160/1107020

请务必阅读：http://en.wikipedia.org/wiki/Same_origin_policy

希望比某种方式有所帮助。

如何从iframe访问文档中的<img/>？

9 个答案: