আমি আই-গুগলের মতো অ্যাপ্লিকেশনটিতে কাজ করছি। অন্যান্য অ্যাপ্লিকেশনগুলির সামগ্রী (অন্যান্য ডোমেনগুলিতে) যদি আইফ্রেমে ব্যবহার করে প্রদর্শিত হয়।
আমি কীভাবে আইফ্রেমেটসের সামগ্রীর উচ্চতার সাথে মান রেখে আইফ্রেমগুলিকে পুনরায় আকার দেব?
গুগল যে জাভাস্ক্রিপ্ট ব্যবহার করে তা বুঝে নেওয়ার চেষ্টা করেছি কিন্তু তা অবরুদ্ধ, এবং ওয়েব অনুসন্ধান এখনও পর্যন্ত ফলদায়ক হয়নি।
আপডেট: দয়া করে নোট করুন যে সামগ্রীগুলি অন্য ডোমেন থেকে লোড করা হয়েছে, সুতরাং একই-উত্স নীতি প্রযোজ্য।
উত্তর:
আমাদের এই ধরণের সমস্যা ছিল, তবে আপনার পরিস্থিতির বিপরীতে সামান্য - আমরা অন্য ডোমেনের সাইটগুলিতে 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একটি URL যুক্তি মধ্য দিয়ে ড। এটি করতে, নির্দিষ্ট framed.htmlএকটি আইফ্রেমে রয়েছে has src=''তার যখন onloadআগুন, এটা তার নিজস্ব উচ্চতা মূল্যায়ণ, এবং এই সময়ে আইফ্রেম এর 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%"এবং যদি উইন্ডো প্রস্থটি পাঠ্য মোড়ানো বা অন্য কিছু করতে পরিবর্তিত হয়, অভ্যন্তরীণ ফ্রেমটি স্বীকৃতি দেবে যে এটির পুনরায় আকার দেওয়া দরকার।
আপনার যদি অন্য কোনও ডোমেন থেকে আইফ্রেমে সামগ্রী হ্যান্ডেল করার দরকার না হয় তবে এই কোডটি ব্যবহার করে দেখুন, এটি সমস্যার সম্পূর্ণ সমাধান করবে এবং এটি সহজ:
<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 ()
উইন্ডো.পোস্টমেজেজ ক্রস-অরিজিন যোগাযোগটি নিরাপদে সক্ষম করার একটি পদ্ধতি। সাধারণত, বিভিন্ন পৃষ্ঠাগুলির স্ক্রিপ্টগুলি কেবল তখনই একে অপরকে অ্যাক্সেসের অনুমতি দেয় যদি কেবলমাত্র তাদের সম্পাদন করা পৃষ্ঠাগুলি একই প্রোটোকল (সাধারণত উভয় HTTP), পোর্ট নম্বর (80 টি http- এর জন্য ডিফল্ট) এবং হোস্ট (মডুলো) সহ অবস্থানগুলিতে থাকে ডকুমেন্ট.ডোমেন একই পৃষ্ঠায় উভয় পৃষ্ঠা দ্বারা সেট করা হচ্ছে)। উইন্ডো.পোস্টমেজেজ এই বিধিনিষেধকে এমনভাবে উপেক্ষা করার জন্য একটি নিয়ন্ত্রিত প্রক্রিয়া সরবরাহ করে যা সঠিকভাবে ব্যবহৃত হলে নিরাপদ।
সারসংক্ষেপ
উইন্ডো.পোস্টমেসেজ, যখন ডাকা হয়, টার্গেট উইন্ডোতে একটি মেসেজএভেন্ট প্রেরণের কারণ ঘটে যখন নির্ধারিত কোনও স্ক্রিপ্ট সম্পূর্ণ হয় (উদাহরণস্বরূপ উইন্ডো.পস্টম্যাসেজ যদি ইভেন্ট হ্যান্ডলার থেকে কল করা হয়, পূর্ব নির্ধারিত মুলতুবি সময়সীমা ইত্যাদি)। )। ম্যাসেজএভেন্টে টাইপ মেসেজ রয়েছে, একটি ডেটা সম্পত্তি যা উইন্ডোকে সরবরাহ করা প্রথম আর্গুমেন্টের স্ট্রিং ভ্যালুতে সেট করা হয় ost পোস্টম্যাসেজ, উইন্ডোটিতে কলিং উইন্ডোতে মূল ডকুমেন্টের উত্সের সাথে সম্পর্কিত একটি উত্স সম্পত্তি। টাইপ উইন্ডোতে পোস্টমেসেজ। postMessage বলা হয়েছিল, এবং একটি উত্স সম্পত্তি যা উইন্ডো যা থেকে উইন্ডো.পস্টম্যাসেজ বলা হয়। (ইভেন্টের অন্যান্য স্ট্যান্ডার্ড বৈশিষ্ট্যগুলি তাদের প্রত্যাশিত মান সহ উপস্থিত থাকে))
আইফ্রেম-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
উইন্ডো.পোস্টমেসেজে এইচটিএমএল 5 কার্যকারী খসড়া draft
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 আমার পক্ষে কাজ করেছিল।
এফওয়াইআই : আপনার আইফ্রেমে যদি ইতিমধ্যে আপনার "উচ্চতা" বৈশিষ্ট্য থাকে তবে এটি কেবল স্টাইল = "উচ্চতা: xxx" যুক্ত করে। এটি আপনি যা চান তা নাও হতে পারে।
অন্য সমস্ত উত্তরগুলি পুরানো :-) হিসাবে কিছুটা দেরিতে হতে পারে তবে ... এখানে আমার সমাধান। প্রকৃত এফএফ, ক্রোম এবং সাফারি 5.0 তে পরীক্ষিত।
CSS:
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
});
});
});আশা করি এটি যে কাউকে সহায়তা করবে।
অবশেষে আমি আইফ্রেমে ব্যবহার করে প্যারেন্ট ওয়েবসাইটে ডেটা প্রেরণের জন্য আরও কিছু সমাধান খুঁজে পেয়েছি window.postMessage(message, targetOrigin);। আমি এখানে আমি কীভাবে করেছি তা ব্যাখ্যা করি।
সাইট এ = http://foo.com সাইট বি = http://bar.com
সাইটবি ওয়েবসাইটএ ওয়েবসাইটের ভিতরে লোড হচ্ছে
সাইটবি ওয়েবসাইটে এই লাইন আছে
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.
}আইই জন্য
আইফ্রেমের ভিতরে:
window.parent.postMessage('{"key":"value"}','*');বাইরে:
eventer(messageEvent, function (e) {
var data = jQuery.parseJSON(e.data);
doSomething(data.key);
}, false);আইফ্রেমে সামগ্রী হিসাবে একই সার্ভার দ্বারা পরিবেশন করা গতিশীলভাবে তৈরি স্টাইল শিট ব্যবহার করে এখানে একটি সহজ সমাধান। বেশ সহজভাবে স্টাইল শিটটি "জানে" আইফ্রেমে কী রয়েছে এবং আইফ্রেমে স্টাইল করার জন্য প্রয়োজনীয় মাত্রাগুলি জানে। এটি একই উত্স নীতির সীমাবদ্ধতার কাছাকাছি পায়।
http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/
সুতরাং সরবরাহিত আইফ্রেমে কোডটির সাথে এর সাথে শৈলীর শীট থাকবে ...
<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>জেএসফিডাল: http://jsfiddle.net/00qggsjj/2/
আমি ডকুমেন্ট.ডোমেন নির্ধারণের ভিত্তিতে একটি সমাধান প্রতিস্থাপনের জন্য কনরোয়পির ফ্রেম-ইন-ফ্রেম সলিউশনটি বাস্তবায়ন করছি, তবে বিভিন্ন ব্রাউজারগুলিতে সঠিকভাবে iframe এর বিষয়বস্তুর উচ্চতা নির্ধারণ করা বেশ শক্ত হয়ে গেছে (এখনই FF11, Ch17 এবং IE9 দিয়ে পরীক্ষা করা) )।
ConroyP ব্যবহার করে:
var height = document.body.scrollHeight;তবে এটি কেবলমাত্র প্রাথমিক পৃষ্ঠা লোডে কাজ করে। আমার আইফ্রেমে গতিশীল সামগ্রী রয়েছে এবং নির্দিষ্ট ইভেন্টগুলিতে আমার আইফ্রেমে আকার পরিবর্তন করতে হবে।
আমি যা করতে পেরেছি তা হল বিভিন্ন ব্রাউজারের জন্য বিভিন্ন জেএস বৈশিষ্ট্য ব্যবহার করা।
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 দ্বারা "অনুপ্রাণিত" ফাংশনটি ব্রাউজার সনাক্ত করে
এটি এফএফ এবং আইইয়ের জন্য ভাল কাজ করেছে তবে Chrome এর সাথে সমস্যা ছিল। এর মধ্যে একটি সময় নির্ধারণের সমস্যা ছিল, সম্ভবতঃ iframe এর hight নির্ধারণ / সনাক্ত করতে Chrome কে কিছুটা সময় লাগে takes এবং তারপরে ক্রোম কখনই আইফ্রেমে সামগ্রীর উচ্চতাটি সঠিকভাবে ফিরিয়ে দেয়নি যদি আইফ্রেমে সামগ্রীটির চেয়ে বেশি ছিল higher উচ্চতা হ্রাস পেলে এটি গতিশীল সামগ্রীর সাথে কাজ করবে না।
এটি সমাধান করার জন্য আমি সর্বদা আইফ্রেমটি সামগ্রীটির উচ্চতা সনাক্ত করার আগে কম উচ্চতায় সেট করি এবং তারপরে 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>আই গুগল গ্যাজেটগুলিকে সক্রিয়ভাবে পুনরায় আকার প্রয়োগ করতে হবে, সুতরাং আমার অনুমান ক্রস-ডোমেন মডেলটিতে রয়েছে আপনি কোনও উপায়ে দূরবর্তী সামগ্রী অংশ না নিয়ে এটি করতে পারবেন না। যদি আপনার সামগ্রীটি সাধারণ ক্রস-ডোমেন যোগাযোগ কৌশলগুলি ব্যবহার করে ধারক পৃষ্ঠায় নতুন আকারের সাথে একটি বার্তা পাঠাতে পারে, তবে বাকিটি সহজ simple
যখন আপনি কোনও ওয়েব পৃষ্ঠাটিকে ইফ্রেম আকারে ফিট করতে জুম আউট করতে চান:
এখানে একটি উদাহরণ:
<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 এ তথ্য যুক্ত করে। এখানে একটি ডেমো, আকার পরিবর্তন করুন এবং এই উইন্ডোটি স্ক্রোল করুন .. জসনের সহ ফলাফলটি ইউআরএলটি দেখতে এইরকম দেখাচ্ছে ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight:5124,windowHightight:101919 স্ক্রোলহাইট: 571} #
এখানে সোর্স কোড ফিডল 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);
}লোডে ক্রুয়ের সাথে কাজ করুন (ক্রস ব্রাউজার):
<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>এটি সামান্য জটিল কারণ আপনার যদি জানতে হবে যে কখন আইফ্রেম পৃষ্ঠাটি লোড হয়ে গেছে, যা আপনি যখন এর বিষয়বস্তুটির নিয়ন্ত্রণে না রাখেন তখন তা শক্তিশালী। ইফ্রেমে কোনও অনলোড হ্যান্ডলার যুক্ত করা সম্ভব, তবে আমি অতীতে এটি চেষ্টা করেছি এবং ব্রাউজারগুলিতে এটির বিবিধ আচরণ রয়েছে (কে ভাবেন না যে সবচেয়ে বিরক্তিকর ...)। আপনাকে সম্ভবত আইফ্রেমে পৃষ্ঠায় এমন একটি ফাংশন যুক্ত করতে হবে যা পুনরায় আকার পরিবর্তন করে এবং এমন কিছু লিপি ইনটেক্ট করে যাতে সেই ইভেন্টগুলি লোড করতে বা ইভেন্টগুলির আকার পরিবর্তন করতে শোনায় যা পূর্ববর্তী ফাংশনটিকে ডাকে। আমি পৃষ্ঠাটিতে কোনও ফাংশন যুক্ত করার কথা ভাবছি যেহেতু আপনি এটির সুরক্ষিত করতে নিশ্চিত করতে চান তবে এটি করা কত সহজ হবে তা আমার কোনও ধারণা নেই।
আমার এই বিশ্বাসের ভিত্তিতে কিছু কাজ করা উচিত।
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>