如何从 iframe 访问文档中的 <image />?
Posted
技术标签:
【中文标题】如何从 iframe 访问文档中的 <image />?【英文标题】:How to access the <img /> in document from iframe? 【发布时间】:2014-05-22 02:10:31 【问题描述】:我有一个 iframe
<iframe src="../Images/landingpage.jpg" id="Iframe1" name="ifrmContent" class="ifrmClass">
</iframe>
我在inspector元素中发现img标签位于带有body标签的“#document”中
<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>imgwidth:100%;
【问题讨论】:
您的控制台报告了 6 个错误。它们是什么? 【参考方案1】:<iframe id='portfoliosrc' src='' onload="frameloaded();"></iframe>
function frameloaded()
var iframe = document.getElementById("portfoliosrc");
var elmnt = iframe.contentWindow.document.getElementsByTagName("img")[0];
elmnt.style.width = "100%";
elmnt.style.height = "100%";
这对我有用
【讨论】:
【参考方案2】:非 jQuery 选项
这个问题和this one很像
根据上面链接上的回答问题,您可以尝试:
var image = window.frames['Iframe1'].document.getElementByTagName('img')[0];
image.styles.width = '100%';
image.styles.height = '90%';
【讨论】:
【参考方案3】:不需要访问 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.;
tmp.;
另外,在 jquery 中:
$('#Iframe1').contents().find('img').css('width':'100%','height':'90%');
https://***.com/a/22953160/1107020
请务必阅读以下内容:http://en.wikipedia.org/wiki/Same_origin_policy
希望在某些方面有所帮助。
【讨论】:
【参考方案4】:如果 iframe 中加载的资源在您的域中 你可以用 jquery 的
来修改它.contents().find('img').css()
但如果它是从另一个域加载的,您将无法使用客户端脚本访问它
【讨论】:
【参考方案5】:您正在使用 iframe 加载图像。存在 document->html->body->img 的原因是您的浏览器正在将图像请求格式化为正确的 HTML。
这可能很明显(而不是你所追求的),但对于这个特定的请求,你应该使用 img 标签:
<img src="../Images/landingpage.jpg" id="img1" >
然后,您可以像更改网站中的任何其他元素一样轻松更改宽度和高度。
【讨论】:
【参考方案6】:#document 只是您的浏览器生成的虚拟文档,因为您直接指向图像 - 所以您无法通过这个看起来像 id 的标签访问它。
你不能只调整 iFrame 的大小吗?
$('#Iframe1').css(
'width' : '100%',
'height' : '90%'
);
而且您可能需要一些 CSS,以便 iFrame 中的图像始终与 iFrame 一样大:
iframe img
height: 100%;
width: 100%;
【讨论】:
【参考方案7】:$('#Iframe1').contents().find('img').css('width':'100% !important','height':'90% !important');
以防高度被类分配覆盖。
【讨论】:
【参考方案8】:确保您的 $("#Iframe1") 选择器在 iframe 完成加载后完成。
$(function()
$("#Iframe1").contents().find('img').css('width':'100%', 'height':'90%');
);
为了可读性
$(document).ready(function()
$("#Iframe1").contents().find('img').css('width':'100%', 'height':'90%');
);
【讨论】:
【参考方案9】:你可以这样做:
$('#Iframe1').contents().find('img').css('width':'100%','height':'90%');
.contents()
将为您提供 iframe 的内容,.find()
为您找到图像,.css()
用于将样式应用于找到的图像。
【讨论】:
@Joseph 这仅适用于同一个域,跨域策略将阻止您更改服务器之外的任何内容。 @pollyGeek 我想我把 js 库搞砸了!我仍在尝试查找是否有任何其他错误.. 给定的答案看起来正确(但我不确定)【参考方案10】:试试
$("#Iframe1").contents().find("img").css(
'width': '100%',
'height': '90%'
);
.css()
.find()
.contents()
【讨论】:
我试过这个并调试了。但没有任何变化!! @Joseph 你应该看到控制台错误。图片显示您有 6 个错误。以上是关于如何从 iframe 访问文档中的 <image />?的主要内容,如果未能解决你的问题,请参考以下文章
访问 <iframe> 元素的窗口和文档的最简洁的跨浏览器方法是啥?
如何访问 <frameset><iframe> 中的所有表单? [复制]
为啥我无法访问设置了 src 或 srcdoc 属性的 iframe 文档?