iframe से दस्तावेज़ में <img /> तक कैसे पहुंचे?

enter image description here मैं एक iframeiframe से दस्तावेज़ में <img /> तक कैसे पहुंचे?

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

मैं निरीक्षक तत्व में पाया गया कि img टैग "#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>img{width:100%;}

स्रोत

2014-04-09 Joseph

आपके कंसोल में 6 त्रुटियां हैं। वे क्या हैं? – happyjack

आप ऐसा कर सकते हैं:

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

.contents() आप iframe की सामग्री प्रदान करेगा और .find() आप छवि पाता है और .css() पाया छवि के लिए शैली लागू करने के लिए प्रयोग किया जाता है।

स्रोत

2014-04-09 05:02:41

कोई बदलाव नहीं दिख रहा है! – Joseph

@ जोसेफ यह केवल उसी डोमेन में काम करेगा, क्रॉस डोमेन नीति आपको आपके सर्वर के बाहर कुछ भी बदलने के लिए रोक देगा। – ProllyGeek

@pollyGeek मुझे लगता है कि मैं जेएस पुस्तकालयों के साथ कहीं गड़बड़ कर रहा हूँ! मैं अभी भी यह खोजने की कोशिश कर रहा हूं कि यह कोई अन्य गलती है .. दिए गए उत्तरों सही दिखते हैं (लेकिन मुझे यकीन नहीं है) – Joseph

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

प्रयास करें

2014-04-09 05:03:10

मैंने कोशिश की और डीबग किया। लेकिन कोई बदलाव दिखाई नहीं दे रहा है !! – Joseph

@ जोसेफ आपको त्रुटि के लिए कंसोल देखना चाहिए। छवि दिखाती है कि आपके पास 6 त्रुटियां हैं। –

के बाद आइफ्रेम समाप्त हो गया है कि आपके $ ("# Iframe1") चयनकर्ता किया जा रहा है सुनिश्चित करें लोड हो रहा है।

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

या पठनीयता

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

स्रोत

2014-04-17 03:09:00 logikal

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

सिर्फ मामले में ऊंचाई क्लास असाइनमेंट द्वारा ओवरराइट है।

स्रोत

2014-04-17 03:17:36 ProllyGeek

# दस्तावेज़ केवल आपके ब्राउज़र द्वारा जेनरेट किया गया एक वर्चुअल दस्तावेज़ है, क्योंकि आप सीधे छवि पर इंगित करते हैं - ताकि आप इस आईडी-दिखने वाले टैग से इसका उपयोग नहीं कर सकें।

क्या आप सिर्फ आईफ्रेम का आकार बदल नहीं सकते?

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

और तुम कुछ सीएसएस आवश्यकता हो सकती है ताकि iFrame में छवि हमेशा iFrame रूप में बड़ा है:

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

स्रोत

2014-04-19 19:41:22

आप एक छवि को लोड करने के लिए एक iframe उपयोग कर रहे हैं। एक दस्तावेज़ है-> html-> body-> img कारण है क्योंकि आपका ब्राउज़र किसी छवि के लिए उचित HTML में अनुरोध स्वरूपित कर रहा है।

यह स्पष्ट हो सकता है (और नहीं आप के बाद क्या कर रहे हैं), लेकिन इस विशेष अनुरोध के लिए, आप img टैग का उपयोग करना चाहिए:,

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

फिर आप आसानी से चौड़ाई और ऊंचाई बदल सकते हैं आप के रूप में आपकी साइट में कोई अन्य तत्व होगा।

स्रोत

2014-04-19 20:11:57 happyjack

गैर jQuery विकल्प

यह सवाल बहुत this one

ऊपर के लिंक पर दिए सवाल के आधार पर करने के लिए इसी तरह की है, तो आप उस कोशिश कर सकते हैं:

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

स्रोत

2014-04-20 10:29:34 roshiro

अगर iframe में लोड किया गया संसाधन आपके डोमेन में है, आप इसे jquery के

के साथ संशोधित कर सकते हैं

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

लेकिन अन्य डोमेन से अपने लोड करता है, तो आप ग्राहक साइड स्क्रिप्टिंग

स्रोत

2014-04-21 06:13:40 k961

के साथ उपयोग नहीं कर सकते आइफ्रेम का उपयोग करने के लिए, बस CSS3 का उपयोग आवश्यक नहीं है।

उन गुणों को शरीर या एचटीएमएल में जोड़ें (जो आईफ्रेम में है)। jQuery में

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

इसके अलावा,:

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/

वैसे भी, अगर आप शुद्ध preffer जावास्क्रिप्ट आप ऐसा कर सकते

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

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

बस यह सुनिश्चित करने के लिए: http://en.wikipedia.org/wiki/Same_origin_policy

किसी भी तरह से इस सहायता से आशा है।

स्रोत

2014-04-21 07:35:20

iframe से दस्तावेज़ में <img /> तक कैसे पहुंचे?

उत्तर

संबंधित मुद्दे