如何从iframe访问文档中的？

我有一个iframe

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

我需要访问这个img（“landingpage.jpg”）以便更改（图像很小…需要resize），其宽度为100％，高度为：90％

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

Answer 1

尝试

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

---

的CSS（）

。找（）

。内容（）

Answer 2

你可以这样做：

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

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

Answer 3

非jQuery选项

这个问题与这个问题非常相似

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

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

Answer 4

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

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

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

Answer 5

确保在iframe完成加载后完成$（“＃iframe1”）选择器。

 $(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("http://sofzh.miximages.com/javascript/how-to-access-the-img-in-document-from-iframe") 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

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