मैं किसी अन्य डोमेन से आइफ्रेम का आकार कैसे बदल सकता हूं
-संपादित
कुछ समाधानों के लिए नीचे स्क्रॉल करें .. या यह नहीं पढ़ें कि यह कैसे करें: डी
कोड हैकिंग के कई घंटों के बाद - निष्कर्ष यह है कि iframe के अंदर कुछ भी सुलभ नहीं है, यहां तक कि स्क्रॉलबार्स जो मेरे डोमेन पर प्रस्तुत करते हैं। मैंने बिना किसी लाभ के कई तकनीकों की कोशिश की है।
आपको समय बचाने के लिए इस मार्ग से नीचे जाने की ज़रूरत नहीं है बस क्रॉस डोमेन संचार के लिए sendMessages का उपयोग करें। HTML <5 के लिए प्लग इन हैं जो मैं उपयोग करता हूं- एक अच्छे उदाहरण के लिए नीचे जाएं :)
पिछले कुछ दिनों से मैं एक iframe को एक साइट में एकीकृत करने की कोशिश कर रहा हूं। यह एक अल्पकालिक समाधान है, जबकि दूसरी तरफ विकसित होता है और एपीआई (महीनों लग सकते हैं ...) और क्योंकि यह अल्पावधि समाधान है जैसा कि हमने किया है कि वे आसानी से उपयोग करना चाहते हैं- मेरे पास दूसरे डोमेन तक पहुंच है, लेकिन इसके लिए पर्याप्त कठिन है p3p हेडर जोड़ें जैसा कि यह है .....
3 आइफ्रेम
निकटतम समाधान मैंने पाया 3 iframes- लेकिन यह क्रोम और सफारी के मानसिक जाता है इसलिए मैं इसका उपयोग नहीं कर सकता।
क्रोम में खुला
http://css-tricks.com/examples/iFrameResize/crossdomain.php#frameId=frame-one&height=1179
स्क्रॉलबार को मापें
मुझे एक और पोस्ट मिला कि कैसे स्क्रॉल करने के लिए फार्म का उपयोग करने और आकार बदलने के लिए .. सिद्धांत में यह अच्छी तरह से काम करता है, लेकिन मैं iframes स्क्रॉल ऊंचाई का उपयोग करके इसे ठीक से लागू नहीं कर सका।
document.body.scrollHeight
यह मोटे तौर पर निकायों की ऊंचाई का उपयोग करता है (इन गुणों तक नहीं पहुंच सकता है 100% क्लाइंट प्रदर्शन कैनवेज़ पर आधारित है और एक्स-डोमेन दस्तावेज़ ऊंचाई नहीं है)
मैं iframes ऊंचाई पाने के लिए jquery का उपयोग करने की कोशिश की
$('#frameId').Height()
$('#frameId').clientHeight
$('#frameId').scrollHeight
क्रोम और यानी में अलग-अलग मान लौटाएँ या बिल्कुल भी समझ में न आए। समस्या यह है कि फ्रेम के अंदर सब कुछ से इनकार कर दिया है - यहां तक कि स्क्रॉलबार ...
गणना की गई शैलियाँ
लेकिन अगर मैं iframe के क्रोम में निरीक्षण और तत्व करता हूं तो यह मुझे धुंधला दिखाई देता है, iframe के अंदर दस्तावेज़ आयाम दिखाता है (iframe.heigh - एक्सेस अस्वीकृत होने के लिए jquery x- डोमेन का उपयोग करके) कंपार्टमेंट में कुछ भी नहीं है CSS 
अब क्रोम कैसे गणना करता है? (संपादन- ब्राउज़र इन सभी सेटिंग्स को शांत करने के लिए रेंडरिंग इंजन में इसके निर्माण का उपयोग करके पृष्ठ को फिर से प्रस्तुत करता है - लेकिन क्रॉस-डोमेन धोखाधड़ी को रोकने के लिए कहीं भी संलग्न नहीं है .. इसलिए ..)
HTML4
मैंने HTML4.x के विनिर्देश पढ़े और यह वहां कहा गया है कि दस्तावेज़ के माध्यम से केवल-पढ़ने के लिए ही मूल्यों को उजागर किया जाना चाहिए, लेकिन यह jquery के माध्यम से अस्वीकृत है।
प्रॉक्सी फ़्रेम
मैं साइट को वापस लाने और गणना करने के मार्ग से नीचे चला गया जो ठीक है .. जब तक कि उपयोगकर्ता iframe से लॉग इन नहीं करता है और प्रॉक्सी को वास्तविक सामग्री के बजाय एक लॉगिन पृष्ठ मिलता है। पेज को दो बार कॉल करने के लिए भी स्वीकार्य नहीं है
http://www.codeproject.com/KB/aspnet/asproxy.aspx
http://www.johnchapman.name/aspnet-proxy-page-cross-domain-requests-from-ajax-and-javascript/
पृष्ठ को पुनः प्रस्तुत करें
मैं इस तक नहीं गया था, लेकिन वहाँ jscript इंजन हैं जो स्रोत को देखेंगे और स्रोत फ़ाइल के आधार पर पृष्ठ को फिर से प्रस्तुत करेंगे। लेकिन यह उन jscripts हैकिंग की आवश्यकता होगी .. और यह वाणिज्यिक संस्थाओं के लिए एक आदर्श स्थिति नहीं है ... और कुछ invole शुद्ध जावा एप्लेट या सर्वर साइड रेंडरिंग
http://en.wikipedia.org/wiki/Server-side_JavaScript
http://htmlunit.sourceforge.net/ <-java jscript नहीं
EDIT 09-2013 अद्यतन
यह सब HTML5 सॉकेट के साथ किया जा सकता है। लेकिन easyXDM गैर HTML5 शिकायत पृष्ठों के लिए बहुत बड़ी गिरावट है।
समाधान 1 बहुत बढ़िया समाधान!
EasyXDM का उपयोग करना
अपने सर्वर पर आप के रूप में एक पृष्ठ की स्थापना की
<html>
<head>
<script src="scripts/easyXDM.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var transport = new easyXDM.Socket(/** The configuration */{
remote: "http://www.OTHERDOMAIN.com/resize_intermediate.html?url=testpages/resized_iframe_1.html",
//ID of the element to attach the inline frame to
container: "embedded",
onMessage: function (message, origin) {
var settings = message.split(",");
//Use jquery on a masterpage.
//$('iframe').height(settings[0]);
//$('iframe').width(settings[1]);
//The normal solution without jquery if not using any complex pages (default)
this.container.getElementsByTagName("iframe")[0].style.height = settings[0];
this.container.getElementsByTagName("iframe")[0].style.width = settings[1];
}
});
</script>
</head>
<body>
<div id="embedded"></div>
</body>
और कॉलर्स डोमेन पर उन्हें केवल उसी स्थान पर intermiedate_frame html और easyXDM.js जोड़ना होगा। माता-पिता फ़ोल्डर की तरह - तब आप केवल आपके लिए रिश्तेदार निर्देशिकाओं या एक निहित फ़ोल्डर का उपयोग कर सकते हैं।
विकल्प 1
यदि आप सभी पृष्ठों पर स्क्रिप्ट जोड़ना नहीं चाहते हैं तो विकल्प 2 देखें!
तब वे केवल उन पृष्ठों के अंत में एक साधारण jscript जोड़ सकते हैं जो आपको होने वाले आकार की आवश्यकता होती है। इनमें से प्रत्येक पृष्ठ में easyxdm को शामिल करने की आवश्यकता नहीं है।
<script type="text/javascript">
window.onload = function(){ parent.socket.postMessage( (parseInt(document.body.clientHeight)) + "," + ( document.body.clientWidth ) ); };
</script>
मैंने भेजे गए मापदंडों को संशोधित किया है। यदि आप चौड़ाई को ठीक से काम करना चाहते हैं, तो दूसरी तरफ के पृष्ठों को पृष्ठ की चौड़ाई को किसी शैली में शामिल करने की आवश्यकता है, जो कुछ इस तरह दिखाई दे:
<style type="text/css">
html, body {
overflow: hidden;
margin: 0px;
padding: 0px;
background-color: rgb(75,0,85);
color:white;
width:660px
}
a {
color:white;
visited:white;
}
</style>
यह मेरे लिए बहुत अच्छा काम करता है। यदि चौड़ाई शामिल नहीं है, तो फ्रेम थोड़ा अजीब व्यवहार करता है और दयालु यह अनुमान लगाने की कोशिश करता है कि यह क्या होना चाहिए .. और ज़रूरत पड़ने पर नीचे नहीं हटेगा।
विकल्प 2
परिवर्तनों के लिए मतदान के लिए मध्यवर्ती फ्रेम को संशोधित करें
अपने मध्यवर्ती फ्रेम कुछ इस तरह दिखना चाहिए ..
<!doctype html>
<html>
<head>
<title>Frame</title>
<script type="text/javascript" src="easyXDM.js">
</script>
<script type="text/javascript">
var iframe;
var socket = new easyXDM.Socket({
//This is a fallback- not needed in many cases
swf: "easyxdm.swf",
onReady: function(){
iframe = document.createElement("iframe");
iframe.frameBorder = 0;
document.body.appendChild(iframe);
iframe.src = "THE HOST FRAME";
iframe.onchange = messageBack();
},
onMessage: function(url, origin){
iframe.src = url;
}
});
//Probe child.frame for dimensions.
function messageBack(){
socket.postMessage ( iframe.contentDocument.body.clientHeight + "," + iframe.contentDocument.body.clientWidth);
};
//Poll for changes on children every 500ms.
setInterval("messageBack()",500);
</script>
<style type="text/css">
html, body {
overflow: hidden;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
border: 0px;
}
</style>
</head>
<body>
</body>
</html>
यदि आकार में परिवर्तन हुआ है तो अंतराल को अधिक कुशल बनाया जा सकता है और केवल तभी भेजा जा सकता है जब आयाम हर 500ms पर संदेश पोस्ट करने के बाद नहीं बदलता है। यदि आप इस चेक को लागू करते हैं तो आप मतदान को 50ms तक कम कर सकते हैं! मज़े करो
ब्राउज़रों पर काम करें और तेजी से हो। महान डिबगिंग सुविधाएँ !!
Excellent Work to Sean Kinsey who made the script!!!
समाधान 2 (काम करता है लेकिन महान नहीं)
इसलिए मूल रूप से यदि आपके पास अन्य डोमेन के साथ एक आपसी समझौता है तो आप भेजने के काम को संभालने के लिए एक पुस्तकालय जोड़ सकते हैं। यदि आपके पास अन्य डोमेन तक कोई पहुंच नहीं है .. तो अधिक हैक की तलाश में रहें- क्योंकि मुझे नहीं मिला या मैं इन सभी को पूरी तरह से सही नहीं ठहरा सकता।
तो अन्य डोमेन इन को वहां हेड टैग में शामिल करेंगे
<script src="scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.postmessage.min.js" type="text/javascript"></script>
<script src="scripts/club.js" type="text/javascript"></script>
Club.js में केवल कुछ कस्टम कॉल्स हैं, जिन्हें मैंने resize कॉल्स के लिए किया है और इसमें शामिल हैं।
$(document).ready(function () {
var parent_url = decodeURIComponent( document.location.hash.replace( /^#/, '' ) ),link;
//Add source url hash to each url to authorise callback when navigating inside the frame.Without this clicking any links will break the communication and no messages will be received
$('a[href]').each(function(){
this.href = this.href + document.location.hash ;
});
//Get the dimensions and send back to calling page.
var h1 = document.body.scrollHeight;
var w1 = document.body.scrollWidth;
$.postMessage({ if_height: h1, if_width: w1 }, parent_url, parent );
});
और आपका पेज पूरी मेहनत करेगा और एक अच्छी स्क्रिप्ट देगा ...
//This is almost like request.querystring used to get the iframe data
function querySt(param, e) {
gy = e.split("&");
for (i = 0; i < gy.length; i++) {
ft = gy[i].split("=");
if (ft[0] == param) {
return ft[1];
}
}
}
$(function () {
// Keep track of the iframe dimensions.
var if_height;
var if_width;
// Pass the parent page URL into the Iframe in a meaningful way (this URL could be
// passed via query string or hard coded into the child page, it depends on your needs).
src = 'http://www.OTHERDOAMIN.co.uk/OTHERSTARTPAGE.htm' + '#' + encodeURIComponent(document.location.href),
// Append the Iframe into the DOM.
iframe = $('<iframe " src="' + src + '" width="100%" height="100%" scrolling="no" frameborder="0"><\/iframe>').appendTo('#iframe');
// Setup a callback to handle the dispatched MessageEvent event. In cases where
// window.postMessage is supported, the passed event will have .data, .origin and
// .source properties. Otherwise, this will only have the .data property.
$.receiveMessage(function (e) {
// Get the height from the passsed data.
//var h = Number(e.data.replace(/.*if_height=(\d+)(?:&|$)/, '$1'));
var h = querySt("if_height", e.data);
var w = querySt("if_width", e.data);
if (!isNaN(h) && h > 0 && h !== if_height) {
// Height has changed, update the iframe.
iframe.height(if_height = h);
}
if (!isNaN(w) && w > 0 && w !== if_width) {
// Height has changed, update the iframe.
iframe.width(if_width = w);
}
//For debugging only really- can remove the next line if you want
$('body').prepend("Recieved" + h + "hX" + w + "w .. ");
// An optional origin URL (Ignored where window.postMessage is unsupported).
//Here you must put the other domain.com name only! This is like an authentication to prevent spoofing and xss attacks!
}, 'http://www.OTHERDOMAIN.co.uk');
});
विकल्प 3
क्रॉस-डोमेन iFrames के आकार बदलने के प्रबंधन के लिए उनकी अब एक छोटी सी जेएस लाइब्रेरी है, इसके लिए अभी भी iFrame की आवश्यकता है कि इसमें जावास्क्रिप्ट का एक सा हिस्सा है, हालांकि, यह सिर्फ देशी JS के 2.8k (765 बाइट्स गिज़पेड) है जिसमें कोई निर्भरता नहीं है और यह तब तक कुछ भी नहीं करता है जब तक कि माता-पिता पृष्ठ द्वारा कॉल न करें। इसका मतलब है कि यह अन्य लोगों के सिस्टम पर एक अच्छा मेहमान है।
यह कोड DOM परिवर्तनों का पता लगाने के लिए MutationObserver का उपयोग करता है और साथ ही आकार बदलने वाली घटनाओं के लिए भी दिखता है, ताकि आईफ्रेम सामग्री के आकार में रहे। IE8 + में काम करता है।
