मैं एक iframe की सामग्री को कैसे माप सकता हूं?

Question

मैं अपनी वेब साइट के एक पृष्ठ में एक iframe की सामग्री को कैसे माप सकता हूं (मेरे उदाहरण में यह एक HTML पृष्ठ है, और एक पॉपअप नहीं है)?

उदाहरण के लिए, मैं मूल आकार के 80% पर iframe में दिखाई देने वाली सामग्री को प्रदर्शित करना चाहता हूं।

Comments

प्रश्न स्क्रैपिंग - अच्छा अभ्यास? मुझे ऐसा नहीं लगता।

— कोनराड रुडोल्फ

विशिष्ट उपयोग मामला: ऑनलाइन wysiwyg संपादक में पृष्ठ / साइट का पूर्वावलोकन करना

— फ्रेंच जूल

Answer 1

यदि आप CSS को इसमें बदलते हैं तो किप का समाधान ओपेरा और सफारी पर काम करना चाहिए:

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }
</style>

आप ओवरफ्लो निर्दिष्ट करना चाह सकते हैं: स्क्रॉलबार को रोकने के लिए #frame पर छिपा हुआ।

Comments

@JonathanM - cf meta.stackexchange.com/questions/75043/… , क्या मैंने यहां कुछ गलत किया है?

— lxs

@ एलएक्स, बिल्कुल नहीं। मैं इसे प्यार करता था, और इसे +1 दिया। बहुत बढ़िया।

— जोनाथन एम

मैंने देखा है कि क्रोम पर मुझे ज़ूम और वेबकिट ट्रांसफ़ॉर्म दोनों लागू होते हैं जो स्केल को दो बार लागू करने का कारण बनता है।

— डेनिसजटायलर

जैसा कि @dennisjtaylor कहते हैं, क्रोम दो बार पैमाने पर लागू होता है - जैसा कि यहां देखा गया है jsfiddle.net/zjTBq/embedded/result

— हॉर्स

जैसा कि सभी आधुनिक ब्राउज़र काफी समय से परिवर्तन का समर्थन कर रहे हैं, मैं उपसर्ग संस्करण (कम से कम एक विकल्प के रूप में) का उपयोग करने पर विचार करूंगा।

— वॉर्टवार्ट

Answer 2

मुझे एक समाधान मिला जो IE और फ़ायरफ़ॉक्स में काम करता है (कम से कम वर्तमान संस्करणों पर)। सफारी / क्रोम पर, आइफ्रेम को उसके मूल आकार के 75% तक आकार दिया जाता है, लेकिन आइफ्रेम के भीतर की सामग्री को बिल्कुल भी नहीं बढ़ाया जाता है। ओपेरा में, यह काम नहीं करता है। यह थोड़ा गूढ़ लगता है, इसलिए यदि ऐसा करने का कोई बेहतर तरीका है तो मैं सुझावों का स्वागत करूंगा।

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

नोट: मुझे wrapफ़ायरफ़ॉक्स के लिए तत्व का उपयोग करना था । किसी कारण से, फ़ायरफ़ॉक्स में जब आप ऑब्जेक्ट को 75% से कम करते हैं, तो यह अभी भी लेआउट कारणों के लिए छवि के मूल आकार का उपयोग करता है। (ऊपर दिए गए नमूना कोड से div को हटाने का प्रयास करें और आप देखेंगे कि मेरा क्या मतलब है।)

मुझे इस प्रश्न से कुछ मिला ।

Answer 3

IE8, 9, और 10 में काम करने के लिए इसे पाने की कोशिश में घंटों तक इससे जूझने के बाद यहां मेरे लिए क्या काम किया।

यह छीन लिया गया CSS FF 26, Chrome 32, Opera 18 और IE9 -11 में 1/7/2014 के अनुसार काम करता है:

.wrap
{
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}

.frame
{
    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

IE8 के लिए, iframe से मेल खाने के लिए चौड़ाई / ऊँचाई सेट करें, और .wrap कंटेनर div में -ms-zoom को जोड़ें।

.wrap
{
    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */
}

ब्राउजर के लिए अपनी पसंदीदा विधि का उपयोग करें, जिसमें सशर्त रूप से उपयुक्त सीएसएस शामिल हैं, देखें क्या * .css फ़ाइल के अंदर ब्राउज़र विशिष्ट सशर्त CSS करने का कोई तरीका है? कुछ विचारों के लिए।

IE7 के बाद से IE7 के बाद से मौजूद नहीं था IE7 एक खो कारण था।

यहाँ वास्तविक HTML है जिसका मैंने परीक्षण किया है:

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

Answer 4

मैंने सिर्फ परीक्षण किया और मेरे लिए, किसी भी अन्य समाधान ने काम नहीं किया। मैंने बस यही कोशिश की और फ़ायरफ़ॉक्स और क्रोम पर पूरी तरह से काम किया, जैसा कि मैंने उम्मीद की थी:

<div class='wrap'>
    <iframe ...></iframe>
</div>

और सीएसएस:

.wrap {
    width: 640px;
    height: 480px;
    overflow: hidden;
}

iframe {
    width: 76.92% !important;
    height: 76.92% !important;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

यह सभी सामग्री को 30% तक बढ़ाता है। पाठ्यक्रम की चौड़ाई / ऊंचाई प्रतिशत के अनुसार समायोजित करने की आवश्यकता है (1 / scale_factor)।

Comments

आप तत्व overflow: hidden;को भी जोड़ना चाहते हैं .wrap। जब आप iframe { width: 200%; height: 200%; transform: scale(0.5); }iframe का उपयोग करना शुरू कर देते हैं तो ओवरफ्लो होने लगता है।

— ओजग्रोज़र

यह अत्याधुनिक दृष्टिकोण है। धन्यवाद!

— fuggi

Answer 5

Lxs के उत्तर के लिए फॉलोअप करें : मैंने एक समस्या पर ध्यान दिया, जहाँ एक ही समय में टैग zoomऔर --webkit-transformटैग दोनों (15.0.874.15 संस्करण क्रोम) को प्रभावित करते हैं। मैं केवल टैग के उपयोग के लिए Chrome को छोड़ कर , और उस साफ़ की गई चीज़ों के zoomसाथ -ms-zoom(केवल IE पर लक्षित) के साथ प्रतिस्थापित करके समस्या के आसपास काम करने में सक्षम था --webkit-transform।

Answer 6

आपको अतिरिक्त टैग के साथ iframe को लपेटने की आवश्यकता नहीं है। बस यह सुनिश्चित करें कि आप उसी राशि से आइफ्रेम की चौड़ाई और ऊंचाई बढ़ाते हैं जो आप आइफ्रेम को नीचे रखते हैं।

उदाहरण के लिए iframe सामग्री को 80% तक स्केल करना:

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-origin: 0 0;
}

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

Answer 7

html {ज़ूम: 0.4;}? -)

Comments

यह 80% के लिए 0.8 होगा, लेकिन यह एक मालिकाना Microsoftism है, इसलिए शायद उपयुक्त नहीं है। यह केवल तभी काम करेगा जब फ्रेम में लोड किए गए दस्तावेज़ को संपादित किया जा सकता है, जो कि संभावना नहीं है।

— क्वेंटिन

Answer 8

सोचा था कि ऊपर जो दिया गया था, उसका उपयोग करके मैं जो साझा करूंगा, वह साझा करूंगा। मैंने क्रोम की जाँच नहीं की है, लेकिन यह IE, फ़ायरफ़ॉक्स और सफारी में काम करता है, जहाँ तक मैं बता सकता हूँ।

इस उदाहरण में स्पेसिफ़िक्स ऑफ़सेट्स और जूम फ़ैक्टर ने दो टैब के फ़ेसबुक टैब (810px चौड़ाई) में दो वेबसाइटों को सिकोड़ने और केंद्रित करने के लिए काम किया।

उपयोग की जाने वाली दो साइटें एक वर्डप्रेस साइट और एक एनआईजी नेटवर्क थीं। मैं html के साथ बहुत अच्छा नहीं हूं, इसलिए यह शायद बेहतर किया जा सकता था, लेकिन परिणाम अच्छा लगता है।

<style>
    #wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
    #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
    #frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
    <iframe id="frame" src="http://www.example.com"></iframe>
</div>

Answer 9

यदि आप विंडो को आकार देने पर iframe और उसकी सामग्री को स्केल करना चाहते हैं, तो आप निम्न को विंडो के आकार इवेंट और साथ ही iframes ऑनलोड इवेंट में सेट कर सकते हैं।

function()
{
    var _wrapWidth=$('#wrap').width();
    var _frameWidth=$($('#frame')[0].contentDocument).width();

    if(!this.contentLoaded)
      this.initialWidth=_frameWidth;
    this.contentLoaded=true;
    var frame=$('#frame')[0];

    var percent=_wrapWidth/this.initialWidth;

    frame.style.width=100.0/percent+"%";
    frame.style.height=100.0/percent+"%";

    frame.style.zoom=percent;
    frame.style.webkitTransform='scale('+percent+')';
    frame.style.webkitTransformOrigin='top left';
    frame.style.MozTransform='scale('+percent+')';
    frame.style.MozTransformOrigin='top left';
    frame.style.oTransform='scale('+percent+')';
    frame.style.oTransformOrigin='top left';
  };

यह आइफ्रेम और उसके कंटेंट स्केल को रैप डिव की 100% चौड़ाई (या जो भी प्रतिशत आप चाहते हैं) बना देगा। एक अतिरिक्त बोनस के रूप में, आपको फ्रेम के सीएसएस को हार्ड कोडित मूल्यों पर सेट करने की आवश्यकता नहीं है क्योंकि वे सभी गतिशील रूप से सेट होंगे, आपको बस इस बात की चिंता करने की आवश्यकता होगी कि आप रैप डिव को कैसे प्रदर्शित करना चाहते हैं।

मैंने इसका परीक्षण किया है और यह क्रोम, IE11 और फ़ायरफ़ॉक्स पर काम करता है।

Answer 10

मुझे लगता है कि आप जावास्क्रिप्ट (डॉक्युमेंट .body.clientWidth इत्यादि के माध्यम से) के साथ इच्छित ऊँचाई और चौड़ाई की गणना करके ऐसा कर सकते हैं और फिर iframe को अपने HTML में इस तरह इंजेक्ट कर सकते हैं:

var तत्व = document.getElementById ("myid");
element.innerHTML + = "<iframe src = 'http: //www.google.com' height = '200' चौड़ाई = '" + document.body.clientWidth * 0.8 + "' />";

मैं IE6 में यह परीक्षण नहीं किया था, लेकिन यह अच्छे लोगों के साथ काम करने लगता है :)

Comments

मेरी अज्ञानता का बहाना है, लेकिन यह स्रोत पृष्ठ को ज़ूम आउट करने के बजाय स्रोत पृष्ठ का iframe 80% नहीं करेगा?

— फिल हीली

Answer 11

जिन लोगों को IE में काम करने में आपको परेशानी हो रही है, उनके लिए यह -ms-zoomनीचे दिए गए सुझाव के अनुसार उपयोग करने में मदद करता है और #wrapडिव पर जूम फंक्शन का उपयोग करता है , iframeआईडी से नहीं । मेरे अनुभव में, zoomफ़ंक्शन के साथ iframe div को स्केल करने की कोशिश कर रहा है#frame , यह iframe आकार और इसके भीतर की सामग्री को मापेगा (जो कि आप जो जा रहे हैं)।

इस तरह दिखता है। IE8, Chrome और FF पर मेरे लिए काम करता है।

#wrap {
  overflow: hidden;
  position: relative;
  width:800px;
  height:850px;
  -ms-zoom: 0.75;
}

Comments

उपयोग zoomIE8 में मानक मोड, उपयोग -ms-zoomquirks मोड में।

— जोनाथन हिल

Answer 12

यह मेरा पृष्ठ 890px चौड़ाई के साथ एक समाधान था

#frame { 
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0; 

}

Answer 13

#Wrap #frame समाधान ठीक काम करता है, जब तक कि #wrap में संख्या पैमाने कारक का #frame बार है। यह केवल स्केल्ड डाउन फ्रेम के उस हिस्से को दिखाता है। आप इसे यहां वेबसाइटों को स्केल करने और फॉर्म के समान पिन्टरेस्ट में डालने (लकड़ी के jQuery प्लगइन के साथ) देख सकते हैं:

http://www.genautica.com/sandbox/woodmark-index.html

Answer 14

तो शायद सबसे अच्छा समाधान नहीं है, लेकिन ठीक काम करने लगता है।

<IFRAME ID=myframe SRC=.... ></IFRAME>

<SCRIPT>
    window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>

स्पष्ट रूप से माता-पिता को ठीक करने की कोशिश नहीं कर रहा है, बस थोड़ा सा जावास्क्रिप्ट के साथ बच्चे के शरीर में "ज़ूम: 50%" शैली जोड़ रहा है।

शायद "HTML" तत्व की शैली सेट कर सकता है, लेकिन यह कोशिश नहीं की।

Comments

यह मत करो। से developer.mozilla.org/en-US/docs/Web/CSS/zoom :। "यह सुविधा अमानक है और एक मानकों पटरी पर नहीं है वेब का सामना करना पड़ उत्पादन साइटों पर उपयोग न करें: इसके लिए काम नहीं करेगा प्रत्येक उपयोगकर्ता। कार्यान्वयन के बीच बड़ी असंगतताएं भी हो सकती हैं और भविष्य में व्यवहार बदल सकता है। "

— हैकल

+1 यह (iframe की सामग्री को संशोधित करता है, iframe को ही नहीं) एक बेहतर विचार की तरह लगता है। मुझे एक पृष्ठ को स्केल करने और उस पृष्ठ के पूर्वावलोकन के रूप में दिखाने के लिए एक तरीके की आवश्यकता थी और इस दृष्टिकोण ने समस्या को हल किया।

— अकिनुरी

@akinuri हाँ, यह वही है जो मैंने इसके लिए इस्तेमाल किया है। मैं कई समाधानों से गुज़रा, लेकिन यह सबसे आसान लग रहा था। मैं बस iframes के माध्यम से iterated और थंबनेल के एक पृष्ठ पाने के लिए उन सभी को सिकोड़ें। बाल पृष्ठों में किसी भी बदलाव की आवश्यकता नहीं है।

— ग्राहम

Answer 15

यदि आपका html css के साथ स्टाइल किया गया है, तो आप संभवत: विभिन्न आकारों के लिए अलग-अलग स्टाइल शीट लिंक कर सकते हैं।

Answer 16

मुझे नहीं लगता कि HTML में ऐसी कार्यक्षमता है। केवल एक चीज जिसकी मैं कल्पना कर सकता हूं वह है कुछ सर्वर-साइड प्रोसेसिंग करना। शायद आप उस वेबपृष्ठ की एक छवि स्नैपशॉट प्राप्त कर सकते हैं जिसे आप सेवा करना चाहते हैं, इसे सर्वर पर स्केल करें और क्लाइंट को सेवा दें। हालांकि यह एक गैर-संवादात्मक पृष्ठ होगा। (शायद एक इमेजमैप लिंक हो सकता है, लेकिन अभी भी।)

एक अन्य विचार एक सर्वर-साइड घटक होगा जो HTML को बदल देगा। फायरफॉक्स 2.0 जूम फीचर की तरह SOART। यह बिल्कुल सही ज़ूमिंग नहीं है, लेकिन कुछ भी नहीं से बेहतर है।

इसके अलावा, मैं विचारों से बाहर हूं।

Answer 17

जैसा कि कहा गया है, मुझे संदेह है कि आप यह कर सकते हैं।
हो सकता है कि स्टाइल सेट करके आप कम से कम टेक्स्ट को स्केल कर सकें font-size: 80%;।
बिना पुष्टि किए, यह सुनिश्चित नहीं है कि यह काम करता है, और बक्से या छवियों का आकार परिवर्तन नहीं करेगा।