অন্য ডোমেন থেকে আমি কীভাবে একটি আইফ্রেম আকার দিতে পারি
- সম্পাদনা
কিছু সমাধানের জন্য নীচে স্ক্রোল করুন .. বা কীভাবে এটি করবেন না তা পড়ুন: ডি
অনেক ঘন্টা কোড হ্যাকিংয়ের পরে - উপসংহারে বলা হয় যে আইফ্রেমের অভ্যন্তরের যে কোনও কিছুই অ্যাক্সেসযোগ্য নয়, এমনকি আমার ডোমেনে রেন্ডার করা স্ক্রোলবারগুলি। আমি অনেক কৌশল চেষ্টা করেও কোন লাভ হয়নি।
আপনার সময় সাশ্রয় করতে এই রুটটিও নেমে যাবেন না কেবল ক্রস ডোমেন যোগাযোগের জন্য সেন্ড ম্যাসেজগুলি ব্যবহার করুন। এইচটিএমএল <5 এর জন্য প্লাগইন রয়েছে যা আমি ব্যবহার করি- একটি দুর্দান্ত উদাহরণের জন্য নীচে যান :)
গত কয়েক দিন আমি একটি সাইটে একটি আইফ্রেম সংহত করার চেষ্টা করছি। এটি একটি স্বল্প মেয়াদী সমাধান, যখন অন্য দিকটি বিকাশ করে এবং এপিআই (কয়েক মাস সময় নিতে পারে ...) এবং এটি হ'ল স্বল্পমেয়াদী সমাধান হিসাবে আমরা ইজি এক্সএমএম ব্যবহার করতে চাই- আমার অন্য ডোমেনটিতে অ্যাক্সেস রয়েছে তবে তাদের কাছে এটি জিজ্ঞাসা করা যথেষ্ট কঠিন p3p শিরোনামটি যেমন যুক্ত করুন .....
3 iframes
আমার সর্বাধিক নিকটতম সমাধানটি ছিল 3 টি আইফ্রেমেস- তবে এটি ক্রোম এবং সাফারি মানসিকভাবে যায় তাই আমি এটি ব্যবহার করতে পারি না।
ক্রোম খোলা
http://css-tricks.com/example/iFrameResize/crossdomain.php#frameId=frame-one&hight=1179
স্ক্রোলবারগুলি পরিমাপ করুন
ফর্মটি চেষ্টা ও আকার পরিবর্তন করতে স্ক্রোলহাইটটি কীভাবে ব্যবহার করতে হয় সে সম্পর্কে আমি একটি অন্য পোস্ট পেয়েছি .. তত্ত্বের ক্ষেত্রে এটি ভাল কাজ করে তবে আমি iframes স্ক্রোল উচ্চতা ব্যবহার করে এটি সঠিকভাবে প্রয়োগ করতে পারিনি ..
document.body.scrollHeight
যেগুলি দেহগুলির উচ্চতা অবলম্বন করে (এই বৈশিষ্ট্যগুলিকে 100% অ্যাক্সেস করতে পারে না ক্লায়েন্টদের প্রদর্শন ক্যানভাজের উপর ভিত্তি করে এক্স-ডোমেন নথির উচ্চতার নয়)
আমি iframes উচ্চতা পেতে jquery ব্যবহার করার চেষ্টা করেছি
$('#frameId').Height()
$('#frameId').clientHeight
$('#frameId').scrollHeight
রিটার্নের মানগুলি ক্রোমে আলাদা হয় এবং যেমন - বা এগুলি মোটেই বোঝা যায় না। সমস্যাটি হ'ল ফ্রেমের অভ্যন্তরে সমস্ত কিছুই অস্বীকৃত - এমনকি স্ক্রোলবারও ...
গণিত শৈলী
তবে আমি যদি ইফ্রেমের ক্রোমটিতে পরিদর্শন করি এবং উপাদানটি উত্সাহিত করি তবে ব্লাডি আমাকে আইফ্রেমের অভ্যন্তরে নথির মাত্রাগুলি দেখায় (jquery এক্স-ডোমেন ব্যবহার করে iframe.heigh - অ্যাক্সেস প্রত্যাখ্যান করা হয়) গণিত CSS এ কিছুই নেই 
এখন ক্রোম কীভাবে এটি গণনা করে? (সম্পাদনা ব্রাউজার এই সমস্ত সেটিংস ক্যালকুলিয়েট করতে তার বিল্ডটি রেন্ডারিং ইঞ্জিন ব্যবহার করে পৃষ্ঠাটিকে পুনরায় রেন্ডার করে - তবে ক্রস-ডোমেন জালিয়াতি রোধে কোথাও সংযুক্ত থাকে না .. তাই ..)
এইচটিএমএল 4
আমি HTML4.x এর স্পেসিফিকেশন পড়ি এবং এটিতে সেখানে বলা হয়েছে যে ডকুমেন্ট.এলিমেন্টের মাধ্যমে কেবল পঠনযোগ্য মূল্যবোধগুলি প্রকাশ করা উচিত তবে এটি অ্যাক্সেস jquery এর মাধ্যমে অস্বীকার করা হয়েছে
প্রক্সি ফ্রেম
আমি সাইটটি প্রক্সিংয়ের রুটে নেমে গিয়েছিলাম এবং যা ঠিক আছে তা গণনা করতে চলেছি .. যতক্ষণ না কোনও ব্যবহারকারী যদি আইফ্রেমে প্রবেশ করে এবং প্রক্সি প্রকৃত সামগ্রীর পরিবর্তে লগইন পৃষ্ঠা না পায়। কিছু পৃষ্ঠায় দু'বার কল করাও গ্রহণযোগ্য নয় not
http://www.codeproject.com/KB/aspnet/asproxy.aspx
http://www.johnchapman.name/aspnet-proxy-page-cross-domain-requests-from-ajax-and- javascript/
পৃষ্ঠাটি পুনরায় রেন্ডার করুন
আমি এদিকে যাইনি তবে সেখানে জেএসক্রিপ্ট ইঞ্জিন রয়েছে যা উত্সটি দেখবে এবং উত্স ফাইলের ভিত্তিতে পৃষ্ঠাটি পুনরায় রেন্ডার করবে। তবে এটির জন্য এই জস্ক্রিপ্টগুলি হ্যাক করা দরকার .. এবং এটি বাণিজ্যিক সংস্থাগুলির জন্য আদর্শ পরিস্থিতি নয় ... এবং কিছু খাঁটি জাভা অ্যাপলেট বা সার্ভার সাইড রেন্ডারিং
http://en.wikedia.org/wiki/Server-side_JavaScript
http://htmlunit.sourceforge.net/ <জাভা স্ক্রিপ্ট নয়
সম্পাদনা 09-2013 আপডেট
এই সমস্ত HTML5 সকেট দিয়ে করতে পারে। তবে ইজিজএক্সডিএম এইচটিএমএল 5 অভিযোগ পৃষ্ঠাগুলির জন্য দুর্দান্ত ফ্যালব্যাক।
সমাধান 1 খুব দুর্দান্ত সমাধান!
ইজিএক্সডিএম ব্যবহার করে
আপনার সার্ভারে আপনি আকারে একটি পৃষ্ঠা সেট আপ করেছেন
<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 এইচটিএমএল এবং ইজিএক্সডিএম.জেগুলি যুক্ত করতে হবে। পিতামাতার ফোল্ডারের মতো - তারপরে আপনি কেবলমাত্র আপনার জন্য আপেক্ষিক ডিরেক্টরি বা একটি অন্তর্ভুক্ত ফোল্ডার অ্যাক্সেস করতে পারেন।
বিকল্প 1
আপনি যদি সমস্ত পৃষ্ঠায় স্ক্রিপ্ট যোগ করতে না চান তবে বিকল্প 2 দেখুন!
তারপরে তারা পুনরায় আকার পরিবর্তন করতে হবে এমন প্রতিটি পৃষ্ঠাগুলির শেষে কেবল একটি সাধারণ jscript যুক্ত করতে পারে। এই পৃষ্ঠাগুলির প্রত্যেকটিতে ইজেক্সডিএম অন্তর্ভুক্ত করার দরকার নেই।
<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>
যদি আকার পরিবর্তন হয় এবং কেবল 500 মিমি বার্তা বার্তা প্রেরণের মাত্রাগুলি পরিবর্তন না হয় তবে কেবলমাত্র প্রেরণ করতে হলে ব্যবধানটি আরও বেশি দক্ষ করে তোলা যেতে পারে। আপনি যদি এই চেকটি বাস্তবায়ন করেন তবে আপনি 50 মিমি হিসাবেও কম ভোট দিতে পারবেন! আনন্দ কর
ব্রাউজার জুড়ে কাজ করুন এবং দ্রুত। দুর্দান্ত ডিবাগিং বৈশিষ্ট্যগুলি !!
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>
ক্লাব.জেএসগুলিতে কিছু কাস্টম কল আমি পুনরায় আকারের কলগুলির জন্য করেছি এবং এতে রয়েছে ..
$(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
ক্রস-ডোমেন আইফ্রেমগুলি পুনরায় আকার দেওয়ার জন্য তাদের এখন একটি ছোট জেএস লাইব্রেরি, এটির জন্য এখনও আইফ্রেমে কিছুটা জাভাস্ক্রিপ্ট থাকা দরকার, তবে এটি নেটিভ জেএসের কেবল ২.৮ কে (656565 বাইট গাজিপ) যার কোনও নির্ভরতা নেই is এবং প্যারেন্ট পৃষ্ঠা দ্বারা কল না করা পর্যন্ত এটি কিছুই করে না। এর অর্থ এটি অন্য ব্যক্তিদের সিস্টেমে একটি দুর্দান্ত অতিথি।
এই কোডটি ডিওএম পরিবর্তনগুলি সনাক্ত করতে মিউটেশনঅবার্সার ব্যবহার করে এবং পুনরায় আকারের ইভেন্টগুলি সন্ধান করে, যাতে আইফ্রেমটি সামগ্রীতে আকার ধারণ করে। আইই 8 + এ কাজ করে।
