PDA

View Full Version : آموزش: چطوری اندازه iframe رو با اندازه صفحه مورد نظر تنظیم کنم ؟



elimiz
سه شنبه 12 دی 1391, 22:52 عصر
سلام دوستان
من یک صفحه php دارم که میخواهم توسط دستور iframe دیگر صفحات رو در داخل اون لود کنم. مشکل اینجاست که wصفحات من اندازه هاشون فرق میکنن و ثابت نیستن.اما اندازه iframe ثابت هست و تغییر نمیکنه. و در صورتی که صفه لود شده برزگتر اندازه iframe باشه نصفش نمایش داده نمیشه و اگر کوچیک باشه پایین صفحه خای میمونه.
میخواهم اندازه iframe با بزرگ و کوچیک شدن صفحه تغییر کنه. البته اسکرول نداشته باشه. و بدون اسکرول باشه.
ممنون میشم راهنمایی کنید

<a href="asanp.php" target="frmleft">کد آسان پرداخت</a>





<iframe src="int1.php" width="960" marginwidth="0" marginheight="0" name="frmleft" id="frmleft" height="500" border="0" frameborder="0" scrolling="no"></iframe>



بد جوری لنگ این کد هست.ممنون میشم کمکم کنید

SlowCode
سه شنبه 12 دی 1391, 23:10 عصر
سلام
به جای 500 و 960 از 100% استفاده کن و یا 50%

elimiz
سه شنبه 12 دی 1391, 23:26 عصر
ممنون میشم کدش رو بزارین یعنی بجای 600 بنویسم 100% ؟

thacker
سه شنبه 12 دی 1391, 23:30 عصر
بله منظورشون همینه ... :لبخندساده: یعنی مثلا بزارید : width="90%" ....
اون وقت طول فریم شما در هر صفحه ( چه کوچیک چه بزرگ ) ، 90% از طول اون صفحه رو پوشش میده ...

elimiz
چهارشنبه 13 دی 1391, 00:06 صبح
ولی من میخواهم iframe بصورت اتوماتیک بزرگ یا کوچیک بشه ؟
چون من ده تا پیج با اندازه های مختلف دارم. میخواهم وقتی هر کدوم فراخوانی شد iframe هم اندازه پیج بشه
ممنون میشم راهنمایی کنید

thacker
چهارشنبه 13 دی 1391, 01:21 صبح
وقتی از % استفاده کنید درست میشه دیگه ...
مثلا طول یکی از صفحه های شما 100 پیکسله ... وقتی طول فریم رو 70% بزارید یعنی توی اون صفحه طول فریمتون میشه 70 پیکسل ...
طول همون فریم توی یکی دیگه از صفحه هاتون با طول مثلا 400 پیکسل ، میشه 280 پیکسل ...

Unique
چهارشنبه 13 دی 1391, 03:32 صبح
فکر کنم شما متوجه مشکل ایشون نشدین !!
البته مشکلتون ربطی به php نداره و بهتر بود توی انجمن طراحی وب میپرسیدین ، دوست عزیز با javascript میتونید خیلی راحت Iframe را تغییر اندازه بدین و معمولا مشکل در ارتفاع هست نه در width ! برای adjust یا تطبیق ارتفاع با محتویات هم از کد زیر استفاده کنید :


function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};

توجه داشته بشین این کد وقتی کار میده که شما از توی domain خودتون src مربوط به iframe را ست کرده باشین ! در واقع Cross Domain نیستش !

elimiz
چهارشنبه 13 دی 1391, 21:34 عصر
دستت درد نکنه داداش.
من زیاد وارد نیستم.ممنون میشم بگین کد رو کجا بزارم و چطوری استفاده کنم.
ممنون از لطفتون

Unique
پنج شنبه 14 دی 1391, 03:53 صبح
ار کد کاملا مشخصه ! باید توی Onload خود همون iframe اجرا بشه !

elimiz
پنج شنبه 14 دی 1391, 12:22 عصر
سلام
اینجوری استفاده کنم ؟

<script>
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
</script>
<iframe src="int1.php" width="960" marginwidth="0" marginheight="0" name="frmleft" id="frmleft" height="600" border="0" frameborder="0" scrolling="no" onload="setIframeHeight();"></iframe>

Unique
پنج شنبه 14 دی 1391, 16:14 عصر
بله اما Onload را اینطوری بنویسین :


onload="setIframeHeight(this);"

elimiz
پنج شنبه 14 دی 1391, 19:52 عصر
کار نکرد دوست عزیز.
<script>
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
</script>
<iframe src="int1.php" width="960" marginwidth="0" marginheight="0" name="frmleft" id="frmleft" height="600" border="0" frameborder="0" scrolling="no" onload="setIframeHeight(this);"></iframe>

وقتی روی لینک کلیک میکنم. یا اندازه ایفرم از صفحه باز شده کوچیک هست و یا بزرگ. در کل هم اندازه نمیشه.
موندم چیکار کنم

Unique
جمعه 15 دی 1391, 02:53 صبح
نمیدونم چطور کار نمیکنه من یک نمونه پیوست میکنم.


وقتی روی لینک کلیک میکنم.
کدوم لینک ؟

elimiz
شنبه 16 دی 1391, 00:22 صبح
سلام
از یک سایت خارجی پیدا کردم


<style>
html{overflow-y: scroll; overflow-x: hidden}
body{font-family: verdana; font-size:12px; padding: 20px}
.close_button
{
float: right; margin-top:-4px;font-family: verdana; font-size: 11px; font-weight: bold; position: relative; background: darkred; color: white; cursor: pointer; padding: 3px
}
</style>

<script>
/* free code from dyn-web.com */

function getDocHeight(doc) {
doc = doc || document;
// from http://stackoverflow.com/questions/1145850/get-height-of-entire-document-with-javascript
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;

}

function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height in case going from longer to shorter doc
ifrm.style.height = getDocHeight( doc ) + 5+"px";
ifrm.style.visibility = 'visible';
}
</script>

<script>
/* script Arie Molendijk - classical-music.tk */
function load_iframe(which_div,which_iframe,url,position_ty pe,width)
{
frames[which_iframe].location.replace(url);
document.getElementById(which_div).style.display=' block';
document.getElementById(which_div).style.backgroun d='transparent';
document.getElementById(which_div).style.width=wid th;
document.getElementById(which_iframe).style.width= document.getElementById(which_div).style.width;
document.getElementById(which_iframe).style.backgr ound='white';
document.getElementById(which_iframe).style.border ='1px solid silver'
document.getElementById(which_iframe).style.positi on=position_type;
if(document.getElementById(which_iframe).style.dis play=='none'){document.getElementById(which_div).s tyle.display='none'}
}
function hide_iframe(which)
{
document.getElementById(which).style.display='none '
}

</script>

<iframe src="int1.php" width="960" marginwidth="0" marginheight="0" name="frmleft" id="frmleft" height="600" border="0" frameborder="0" scrolling="no" onload="setIframeHeight(this.id)">></iframe>

dele_ghamgin_2008
جمعه 22 بهمن 1395, 17:48 عصر
اگر می خواهید که ارتفاع خودکار تغییر کنه و شما هیچگونه اسکرولی نداشته باشید، ابتدا اسکریپت زیر رو توی تگ head سایت خودتون بریزید و بعدش از دستور ای فریم زیر توی html یا هرجای دیگه سایتتون استفاده کنید.


<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

680100
شنبه 23 بهمن 1395, 10:22 صبح
کدهای جاوا اسکریپت رو بعد از تگ آی فریم بزارید .