मैं एक iGoogle जैसी एप्लिकेशन पर काम कर रहा हूं। अन्य एप्लिकेशन से सामग्री (अन्य डोमेन पर) iframes का उपयोग करके दिखाई जाती है।
मैं iframes की सामग्री की ऊंचाई फिट करने के लिए iframes का आकार कैसे बदल सकता हूं?
मैंने Google द्वारा उपयोग किए जाने वाले जावास्क्रिप्ट को समझने की कोशिश की है, लेकिन यह बाधित है, और वेब पर खोज अब तक बेकार रही है।
अद्यतन: कृपया ध्यान दें कि सामग्री अन्य डोमेन से भरी हुई है, इसलिए समान-मूल नीति लागू होती है।
जवाबों:
हमें इस प्रकार की समस्या थी, लेकिन आपकी स्थिति से थोड़ा उलट - हम अन्य डोमेन पर साइटों को iframed सामग्री प्रदान कर रहे थे, इसलिए समान मूल नीति भी एक मुद्दा थी। कई घंटों तक गूगल को फँसाने के बाद, हमें अंततः एक (कुछ ..) काम करने योग्य समाधान मिला, जिसे आप अपनी आवश्यकताओं के अनुसार ढाल सकते हैं।
एक ही मूल नीति के चारों ओर एक रास्ता है, लेकिन इसमें iframed सामग्री और फ़्रेमिंग पेज दोनों पर बदलाव की आवश्यकता होती है, इसलिए यदि आप दोनों पक्षों में परिवर्तन का अनुरोध करने की क्षमता नहीं रखते हैं, तो यह विधि आपके लिए बहुत उपयोगी नहीं होगी मुझे डर लग रहा है।
एक ब्राउज़र क्विकर है जो हमें एक ही मूल नीति को स्कर्ट करने की अनुमति देता है - जावास्क्रिप्ट या तो अपने स्वयं के डोमेन पर पृष्ठों के साथ संवाद कर सकता है, या उन पृष्ठों के साथ, जो iframed है, लेकिन कभी भी उन पृष्ठों को शामिल नहीं किया जाता है, जैसे यदि आपके पास है:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.htmlफिर (iframed) और (समान डोमेन) के home.htmlसाथ संवाद कर सकते हैं ।framed.htmlhelper.html
Communication options for each page:
+-------------------------+-----------+-------------+-------------+
| | home.html | framed.html | helper.html |
+-------------------------+-----------+-------------+-------------+
| www.foo.com/home.html | N/A | YES | YES |
| www.bar.net/framed.html | NO | N/A | YES |
| www.foo.com/helper.html | YES | YES | N/A |
+-------------------------+-----------+-------------+-------------+framed.htmlhelper.html(iframed) को संदेश भेज सकते हैं लेकिन नहीं home.html (बच्चा माता-पिता के साथ क्रॉस-डोमेन संवाद नहीं कर सकता है)।
यहां कुंजी यह है कि इससे helper.htmlसंदेश प्राप्त किए जा सकते हैं framed.html, और साथ संवाद भी कर सकते हैंhome.html ।
इसलिए अनिवार्य रूप से, जब framed.htmlलोड होता है, तो यह अपनी खुद की ऊंचाई पर काम करता है, बताता है helper.html, जो संदेश को पास करता है home.html, जो तब आइफ्रेम को आकार देता है जिसमें framed.htmlबैठता है।
सबसे आसान तरीका है कि हम से संदेश पारित करने के लिए मिल गया framed.htmlके लिए helper.htmlएक यूआरएल तर्क के माध्यम से किया गया था। ऐसा करने के लिए, निर्दिष्ट के framed.htmlसाथ एक iframe है src=''। जब इसकी onloadआग, यह अपनी खुद की ऊंचाई का मूल्यांकन करता है, और इस बिंदु पर iframe का src सेट करता हैhelper.html?height=N
यहाँ एक स्पष्टीकरण है कि फेसबुक कैसे इसे संभालता है, जो ऊपर की खान से थोड़ा साफ हो सकता है!
में www.foo.com/home.html, निम्नलिखित जावास्क्रिप्ट कोड की आवश्यकता होती है (इसे किसी भी डोमेन पर .js फ़ाइल से लोड किया जा सकता है, संयोग से ..):
<script>
// Resize iframe to full height
function resizeIframe(height)
{
// "+60" is a general rule of thumb to allow for differences in
// IE & and FF height reporting, can be adjusted as required..
document.getElementById('frame_name_here').height = parseInt(height)+60;
}
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>इन www.bar.net/framed.html:
<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>
<script type="text/javascript">
function iframeResizePipe()
{
// What's the page height?
var height = document.body.scrollHeight;
// Going to 'pipe' the data to the parent through the helpframe..
var pipe = document.getElementById('helpframe');
// Cachebuster a precaution here to stop browser caching interfering
pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();
}
</script>की सामग्री www.foo.com/helper.html:
<html>
<!--
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content
-->
<body onload="parentIframeResize()">
<script>
// Tell the parent iframe what height the iframe needs to be
function parentIframeResize()
{
var height = getParam('height');
// This works as our parent's parent is on our domain..
parent.parent.resizeIframe(height);
}
// Helper function, parse param from request string
function getParam( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
</script>
</body>
</html>parentIframeResize(), मैंने JQuery का उपयोग दोनों पेज लोड और किसी भी आकार बदलने वाली घटनाओं को पकड़ने के लिए किया: $(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);यह मुझे iframe सेट करने की अनुमति देता है width="100%"और यदि विंडो की चौड़ाई टेक्स्ट रैप या कुछ बनाने के लिए बदलती है, भीतर का ढांचा यह पहचान लेगा कि उसे आकार बदलने की जरूरत है।
यदि आपको एक अलग डोमेन से iframe सामग्री को संभालने की आवश्यकता नहीं है, तो इस कोड को आज़माएं, यह समस्या को पूरी तरह से हल करेगा और यह सरल है:
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>document.getElementById(id)आपके पास उन सभी से बचने और कोड को सरल बनाने के लिए।
https://developer.mozilla.org/en/DOM/window.postMessage
window.postMessage ()
window.postMessage क्रॉस-ऑरिजिन संचार को सुरक्षित रूप से सक्षम करने के लिए एक विधि है। आम तौर पर, विभिन्न पृष्ठों पर लिपियों को केवल एक-दूसरे तक पहुंचने की अनुमति होती है यदि और केवल उन पृष्ठों को जो उन्हें निष्पादित करते हैं, एक ही प्रोटोकॉल (आमतौर पर http दोनों), पोर्ट संख्या (80 http के लिए डिफ़ॉल्ट), और होस्ट (modulo) के साथ स्थानों पर हैं document.domain दोनों पृष्ठों को एक ही मूल्य पर सेट किया जा रहा है)। window.postMessage इस प्रतिबंध को एक तरह से रोकने के लिए एक नियंत्रित तंत्र प्रदान करता है जो ठीक से उपयोग किए जाने पर सुरक्षित होता है।
सारांश
window.postMessage, जिसे कॉल किया जाता है, एक MessageEvent को लक्ष्य विंडो में भेजे जाने का कारण बनता है जब किसी भी लंबित स्क्रिप्ट को पूरा किया जाना चाहिए (जैसे शेष ईवेंट हैंडलर यदि window.postMessage को ईवेंट हैंडलर, पहले से लंबित टाइमआउट, आदि से पुकारा जाता है) )। MessageEvent में एक प्रकार का संदेश होता है, एक डेटा प्रॉपर्टी, जो window.postMessage को प्रदान किए गए पहले तर्क के स्ट्रिंग मान पर सेट होती है, एक मूल प्रॉपर्टी जो विंडो विंडो में मुख्य डॉक्यूमेंट के मूल के अनुरूप होती है। टाइम विंडो पर postMessage। पोस्टमैसेज को कॉल किया गया था, और एक सोर्स प्रॉपर्टी है, जिसमें से विंडो होती है। window.postMessage कहा जाता है। (घटनाओं के अन्य मानक गुण उनके अपेक्षित मूल्यों के साथ मौजूद हैं।)
IFrame-Resizer पुस्तकालय, एक iFrame यह की सामग्री के लिए आकार रखने के लिए postMessage का उपयोग करता है के साथ MutationObserver सामग्री में परिवर्तन का पता लगाने और jQuery पर निर्भर नहीं करता।
https://github.com/davidjbradshaw/iframe-resizer
jQuery: क्रॉस-डोमेन स्क्रिप्टिंग अच्छाई
http://benalman.com/projects/jquery-postmessage-plugin/
आइफ्रेम विंडो के आकार बदलने का डेमो है ...
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
यह आलेख दिखाता है कि jQuery पर निर्भरता को कैसे दूर किया जाए ... प्लस में बहुत सी उपयोगी जानकारी और अन्य समाधानों के लिंक हैं।
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
बेरबोन उदाहरण ...
http://onlineaspect.com/uploads/postmessage/parent.html
HTML 5 window.postMessage पर काम कर रहे मसौदे
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
क्रॉस-विंडो मैसेजिंग पर जॉन रेजिग
Http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html पर समाधान शानदार काम करता है (jQuery का उपयोग करता है):
<script type=”text/javascript”>
$(document).ready(function() {
var theFrame = $(”#iFrameToAdjust”, parent.document.body);
theFrame.height($(document.body).height() + 30);
});
</script>मुझे नहीं पता कि आपको लंबाई में 30 जोड़ने की जरूरत है ... 1 ने मेरे लिए काम किया।
FYI करें : यदि आपके पास पहले से ही आपके iFrame पर "ऊँचाई" विशेषता है, तो यह शैली = "ऊँचाई: xxx" जोड़ता है। यह वह नहीं हो सकता जो आप चाहते हैं।
थोड़ी देर हो सकती है, क्योंकि अन्य सभी उत्तर पुराने हैं :-) लेकिन ... यहाँ मेरा समाधान है। वास्तविक एफएफ, क्रोम और सफारी 5.0 में परीक्षण किया गया।
सीएसएस:
iframe {border:0; overflow:hidden;}जावास्क्रिप्ट:
$(document).ready(function(){
$("iframe").load( function () {
var c = (this.contentWindow || this.contentDocument);
if (c.document) d = c.document;
var ih = $(d).outerHeight();
var iw = $(d).outerWidth();
$(this).css({
height: ih,
width: iw
});
});
});आशा है कि यह किसी की मदद करेगा।
अंत में मुझे iframe का उपयोग करके मूल वेबसाइट पर डेटा भेजने के लिए कुछ अन्य समाधान मिला window.postMessage(message, targetOrigin);। यहाँ मैं समझाता हूँ कि मैंने कैसे किया।
साइट ए = http://foo.com साइट बी = http://bar.com
SiteB साइटए वेबसाइट के अंदर लोड हो रहा है
SiteB वेबसाइट में यह लाइन है
window.parent.postMessage("Hello From IFrame", "*"); या
window.parent.postMessage("Hello From IFrame", "http://foo.com");तब साइटए का यह निम्नलिखित कोड है
// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child IFrame window
eventer(messageEvent, function (e) {
alert(e.data);
// Do whatever you want to do with the data got from IFrame in Parent form.
}, false); यदि आप सुरक्षा कनेक्शन जोड़ना चाहते हैं तो आप इसका उपयोग अगर हालत में कर सकते हैं eventer(messageEvent, function (e) {})
if (e.origin == 'http://iframe.example.com') {
alert(e.data);
// Do whatever you want to do with the data got from IFrame in Parent form.
}IE के लिए
IFrame के अंदर:
window.parent.postMessage('{"key":"value"}','*');बाहर:
eventer(messageEvent, function (e) {
var data = jQuery.parseJSON(e.data);
doSomething(data.key);
}, false);यहाँ एक सरल समाधान का उपयोग करके गतिशील रूप से उत्पन्न शैली शीट का उपयोग किया जाता है जो कि iframe सामग्री के समान सर्वर द्वारा दिया जाता है। काफी बस स्टाइल शीट "जानता है" iframe में क्या है, और iframe स्टाइल करने के लिए उपयोग करने के लिए आयाम जानता है। यह समान मूल नीति प्रतिबंधों के आसपास हो जाता है।
http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/
तो आपूर्ति की गई iframe कोड की तरह एक साथ स्टाइल शीट होगा ...
<link href="http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget" rel="stylesheet" type="text/css" />
<iframe id="iframe_widget" src="http://your.site/path/to/content?content_id=1234" frameborder="0" width="100%" scrolling="no"></iframe>
इससे सर्वर साइड लॉजिक को इफ्रेम की प्रदान की गई सामग्री के आयामों की गणना करने में सक्षम होना पड़ता है।
यह उत्तर केवल उन वेबसाइटों के लिए लागू है जो बूटस्ट्रैप का उपयोग करते हैं। बूटस्ट्रैप की उत्तरदायी एम्बेड सुविधा काम करती है। यह सामग्री की चौड़ाई (ऊंचाई नहीं) पर आधारित है।
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>jsfiddle: http://jsfiddle.net/00qggsjj/2/
मैं ConroP के फ़्रेम-इन-फ़्रेम समाधान को document.domain की सेटिंग के आधार पर समाधान को बदलने के लिए कार्यान्वित कर रहा हूं, लेकिन यह पाया गया कि विभिन्न ब्राउज़रों में iframe की सामग्री की ऊँचाई को सही ढंग से निर्धारित करना कठिन है (अभी FF11, Ch17 और IE9 के साथ परीक्षण) )।
ConroyP उपयोग करता है:
var height = document.body.scrollHeight;लेकिन यह केवल प्रारंभिक पृष्ठ लोड पर काम करता है। मेरे iframe में गतिशील सामग्री है और मुझे कुछ घटनाओं पर iframe का आकार बदलने की आवश्यकता है।
जो मैंने किया वह अलग-अलग ब्राउज़रों के लिए अलग-अलग JS संपत्तियों का उपयोग कर रहा था।
function getDim () {
var body = document.body,
html = document.documentElement;
var bc = body.clientHeight;
var bo = body.offsetHeight;
var bs = body.scrollHeight;
var hc = html.clientHeight;
var ho = html.offsetHeight;
var hs = html.scrollHeight;
var h = Math.max(bc, bo, bs, hc, hs, ho);
var bd = getBrowserData();
// Select height property to use depending on browser
if (bd.isGecko) {
// FF 11
h = hc;
} else if (bd.isChrome) {
// CH 17
h = hc;
} else if (bd.isIE) {
// IE 9
h = bs;
}
return h;
}getBrowserData () एक्सट्रीम कोर के http://docs.sencha.com/core/source/Ext.html#method-Ext-apply द्वारा "प्रेरित" ब्राउज़र का पता लगाने वाला फ़ंक्शन है
यह FF और IE के लिए अच्छी तरह से काम करता है लेकिन फिर क्रोम के साथ मुद्दे थे। एक समय का मुद्दा था, जाहिर तौर पर इसे आइफ्रेम की ऊंचाई निर्धारित करने / पता लगाने में क्रोम को कुछ समय लगता है। और फिर क्रोम ने भी iframe में सामग्री की ऊंचाई को सही ढंग से वापस नहीं किया अगर iframe सामग्री से अधिक था। ऊंचाई कम होने पर यह गतिशील सामग्री के साथ काम नहीं करेगा।
इसे हल करने के लिए, मैं हमेशा सामग्री की ऊँचाई का पता लगाने से पहले iframe को कम ऊँचाई पर सेट करता हूँ और फिर iframe ऊँचाई को सही मान पर सेट करता हूँ।
function resize () {
// Reset the iframes height to a low value.
// Otherwise Chrome won't detect the content height of the iframe.
setIframeHeight(150);
// Delay getting the dimensions because Chrome needs
// a few moments to get the correct height.
setTimeout("getDimAndResize()", 100);
}कोड को अनुकूलित नहीं किया गया है, यह मेरे परीक्षण से है :)
आशा है कि कोई इसे मददगार मिले!
<html>
<head>
<script>
function frameSize(id){
var frameHeight;
document.getElementById(id).height=0 + "px";
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
}
document.getElementById(id).height= (frameHeight) + "px";
}
</script>
</head>
<body>
<iframe id="frame" src="startframe.html" frameborder="0" marginheight="0" hspace=20 width="100%"
onload="javascript:frameSize('frame');">
<p>This will work, but you need to host it on an http server, you can do it locally. </p>
</body>
</html>iGoogle गैजेट्स को सक्रिय रूप से रीसाइज़िंग को लागू करना है, इसलिए मेरा अनुमान एक क्रॉस-डोमेन मॉडल में है जो आप रिमोट कंटेंट के बिना किसी तरह से भाग नहीं ले सकते। यदि आपकी सामग्री ठेठ क्रॉस-डोमेन संचार तकनीकों का उपयोग करके कंटेनर पृष्ठ पर नए आकार के साथ एक संदेश भेज सकती है, तो बाकी सरल है।
जब आप वेब पेज को आइफ्रेम आकार में फिट करने के लिए ज़ूम आउट करना चाहते हैं:
यहाँ एक उदाहरण है:
<div id="wrap">
<IFRAME ID="frame" name="Main" src ="http://www.google.com" />
</div><style type="text/css">
#wrap { width: 130px; height: 130px; padding: 0; overflow: hidden; }
#frame { width: 900px; height: 600px; border: 1px solid black; }
#frame { zoom:0.15; -moz-transform:scale(0.15);-moz-transform-origin: 0 0; }
</style>यहाँ एक jQuery दृष्टिकोण है जो iframe के src विशेषता के माध्यम से json में जानकारी जोड़ता है। यहाँ एक डेमो है, इस विंडो का आकार बदलें और स्क्रॉल करें। json के साथ परिणामी url इस तरह दिखता है ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/###ddocHeight 20112_windowHeight:1019,scrollHeight: 571} #
यहाँ स्रोत कोड fiddle http://jsfiddle.net/zippyskippy/RJN3G/ है
function updateLocation(){
var loc = window.location.href;
window.location.href = loc.replace(/#{.*}#/,"")
+ "#{docHeight:"+$(document).height()
+ ",windowHeight:"+$(window).height()
+ ",scrollHeight:"+$(window).scrollTop()
+"}#";
};
//setInterval(updateLocation,500);
$(window).resize(updateLocation);
$(window).scroll(updateLocation); var iframes = document.getElementsByTagName("iframe");
for(var i = 0, len = iframes.length; i<len; i++){
window.frames[i].onload = function(_i){
return function(){
iframes[_i].style.height = window.frames[_i].document.body.scrollHeight + "px";
}
}(i);
}लोड (क्रॉस ब्राउज़र) पर jquery के साथ काम करें:
<iframe src="your_url" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%" width="100%"></iframe>
function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
} उत्तरदायी पृष्ठ पर आकार बदलें:
$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
});JQuery का उपयोग करना:
parent.html
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
iframe {
width: 100%;
border: 1px solid black;
}
</style>
<script>
function foo(w, h) {
$("iframe").css({width: w, height: h});
return true; // for debug purposes
}
</script>
<iframe src="child.html"></iframe>
</body>child.html
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
var w = $("#container").css("width");
var h = $("#container").css("height");
var req = parent.foo(w, h);
console.log(req); // for debug purposes
});
</script>
<style>
body, html {
margin: 0;
}
#container {
width: 500px;
height: 500px;
background-color: red;
}
</style>
<div id="container"></div>
</body>यह थोड़ा मुश्किल है क्योंकि आपको पता है कि जब iframe पेज लोड किया गया है, जो तब अलग है जब आप इसकी सामग्री के नियंत्रण में नहीं हैं। Iframe में एक ऑनलोड हैंडलर जोड़ना संभव है, लेकिन मैंने अतीत में यह कोशिश की है और इसमें ब्राउज़रों में बहुत भिन्न व्यवहार है (अनुमान नहीं है कि कौन सबसे अधिक कष्टप्रद है ...)। आपको शायद iframe पेज में एक फंक्शन जोड़ना होगा जो रिसाइज़ को निष्पादित करता है और कुछ स्क्रिप्ट को कंटेंट में इंजेक्ट करता है जो या तो घटनाओं को लोड करने के लिए सुनता है या घटनाओं को आकार देने के लिए, जो तब पिछले फ़ंक्शन को कॉल करता है। मैं सोच रहा हूं कि आप पेज को एक फंक्शन जोड़ सकते हैं क्योंकि आप इसे सुरक्षित बनाना चाहते हैं, लेकिन मुझे नहीं पता कि यह करना कितना आसान होगा।
इस i belive की तर्ज पर कुछ काम करना चाहिए।
parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;इसे अपने शरीर के साथ iframe सामग्री पर लोड करें।
मेरे पास एक आसान समाधान है और आपको लिंक में चौड़ाई और ऊंचाई निर्धारित करने की आवश्यकता है, कृपया प्रयास करें (यह अधिकांश ब्राउज़रों के साथ काम करता है):
<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>