मैं एक अच्छी क्रॉस-डोमेन आईफ्रेम आकार बदलने वाली स्क्रिप्ट की तलाश में हूं जो इसकी सामग्री के आधार पर इसकी ऊंचाई समायोजित करता है। आईफ्रेम के स्रोत के लिए मेरे पास एचटीएमएल/सीएसएस तक पहुंच है। क्या वहां कोई है?क्रॉस-डोमेन आईफ्रेम रेजिज़र?
EasyXDM कर सकते हैं सिर्फ इस :) This blog pos इसे का सार
मैंने अभी एक नज़र डाली और यह मेरी विशेषज्ञता से बाहर निकलता है। – J82
एक स्पष्टीकरण के लिए http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/ देखें - वास्तव में कोई आसान तरीका नहीं है। –
यदि आपका उन आधुनिक ब्राउज़रों पर हैं बताते हैं, तो आप इस काफी आसानी से postMessage in HTML5 साथ हल कर सकते हैं। यहां एक त्वरित समाधान जो अच्छी तरह से काम करता है:
आइफ्रेम पेज:
<!DOCTYPE html>
<head>
</head>
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">
<h3>Got post?</h3>
<p>Lots of stuff here which will be inside the iframe.</p>
</body>
</html>
जो आइफ्रेम शामिल (और इसकी ऊंचाई जानना चाहते हैं) माता पिता पेज:
<script type="text/javascript">
function resizeCrossDomainIframe(id, other_domain) {
var iframe = document.getElementById(id);
window.addEventListener('message', function(event) {
if (event.origin !== other_domain) return; // only accept messages from the specified domain
if (isNaN(event.data)) return; // only accept something which can be parsed as a number
var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
iframe.height = height + "px";
}, false);
}
</script>
<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">
</iframe>
यह मेरे लिए काम किया; केवल दोष यह है कि दूरस्थ iFramed साइट को भी संपादित करने की आवश्यकता है और यह काम नहीं करेगा अगर यह संपादन योग्य नहीं है –
सफलता के बिना क्रोम (संस्करण 56.0.2924.87) में इसका प्रयास किया। कोई त्रुटि न पाएं, लेकिन कोई आकार बदलने का प्रदर्शन नहीं किया जाता है। – Stefan
कुछ शोध के बाद, मैंने jQuery pluging में लिपटे एचटीएमएल 5 के संदेश पासिंग तंत्र का उपयोग करके समाप्त हो गया जो इसे विभिन्न तरीकों का उपयोग करके पुराने ब्राउज़र के साथ संगत बनाता है (उनमें से कुछ इस धागे में वर्णित हैं)।
अंतिम समाधान बहुत आसान है।
मेजबान (पैरेंट) पृष्ठ पर:
// executes when a message is received from the iframe, to adjust
// the iframe's height
$.receiveMessage(
function(event){
$('my_iframe').css({
height: event.data
});
});
// Please note this function could also verify event.origin and other security-related checks.
iframe पृष्ठ पर:
$(function(){
// Sends a message to the parent window to tell it the height of the
// iframe's body
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
$.postMessage(
$('body').outerHeight(true) + 'px',
'*',
target
);
});
मैं क्रोम 13+ पर इस परीक्षण किया है, Firefox 3.6+, IE7 , एक्सपी और डब्ल्यू 7, ओएसएक्स और डब्ल्यू 7 पर सफारी पर 8 और 9। ;)
के बाद कोड मेरे लिए काम किया:
var iframe = document.getElementById(id);
iframe.height = iframe.contentDocument.body.scrollHeight;
ओपेरा 11, आईई 8 से 9, एफएफ 8, क्रोम 16
यह केवल तभी काम करता है जब iframe src माता-पिता के समान डोमेन पर है। – jessica
इस पृष्ठ पर पहले स्क्रिप्ट पर परीक्षण किया गया - एक एचटीएमएल 5 में postMessage का उपयोग कर - मोबाइल पर आईफ्रेम के लिए भी काम करता है - सामग्री के लिए आईफ्रेम का आकार बदलकर - उदाहरण के लिए क्रॉस-डोमेन सिंडिकेट करना - आप आसानी से आईफ़ोन या एंड्रॉइड में स्क्रॉल कर सकते हैं, ऐसे में आईफ्रेम के साथ संभव नहीं है अन्यथा
कोई नहीं ढूंढने में विफल रहा समाधान जो सभी अलग-अलग उपयोग-मामलों से निपटाता है इसके लिए मैंने एक साधारण जेएस लिब लिखना समाप्त कर दिया जो चौड़ाई और ऊंचाई दोनों का समर्थन करता है, एक पृष्ठ पर सामग्री का आकार बदलता है और एकाधिक आईफ्रेम का समर्थन करता है।
मैं डोमेन आइफ्रेम का आकार बदलने के पार करने के लिए एक पूरी अलग समाधान है। इसमें लक्ष्य पृष्ठ की एक प्रति प्राप्त करना शामिल है जिसे आप अपने आईफ्रेम में डाल देंगे, इसे स्थानीय रूप से लिखेंगे, फिर उस प्रतिलिपि को अपने आईफ्रेम में डालें और फ्रेम के अंदर डोम तक उसी डोमेन पहुंच के आधार पर आकार बदलना होगा।
एक उदाहरण इस प्रकार है:
<?php
if(isset($_GET['html'])) $blogpagehtml = file_get_contents(urldecode($_GET['html']));
else $blogpagehtml = file_get_contents('http://r****d.wordpress.com/');
$doc = new DOMDocument();
libxml_use_internal_errors(true);
$doc->loadHTML($blogpagehtml);
libxml_use_internal_errors(false);
$anchors = $doc->getElementsByTagName("a");
foreach($anchors as $anchor) {
$anchorlink=$anchor->getAttribute("href");
if(strpos($anchorlink,"http://r****d.wordpress")===false) $anchor->setAttribute("target","_top");
else $anchor->setAttribute("href","formatimportedblog.php?html=".urlencode($anchorlink));
}
$newblogpagehtml = $doc->saveHTML();
$token = rand(0,50);
file_put_contents('tempblog'.$token.'.html',$newblogpagehtml);
?>
<iframe id='iframe1' style='width:970px;margin:0 auto;' src='tempblog<?php echo $token; ?>.html' frameborder="0" scrolling="no" onLoad="autoResize('iframe1');" height="5600"></iframe>
जांच इस आसान समाधान के बजाय: http: // stackoverflow।कॉम/प्रश्न/7024574/get-and-set-iframe-content-height-auto-resize-गतिशील-आसान-समाधान-विस्तार – Paul
क्या यह मैं हूं या इन सभी उत्तरों को आपको * बाहरी * पृष्ठ पर एक स्क्रिप्ट जोड़ने की आवश्यकता है ? – redben