الصفحة الرئيسية>دروس تصميم الويب>توحيد الويب

حل الارتفاع التكيفي لتنفيذ صفحة إطار iframe

الكاتب：Eve Cole وقت التحديث：2010-01-06 17:05:40

غالبًا ما تحتاج الصفحة الرئيسية إلى تضمين صفحة فرعية أخرى من خلال إطار iframe، ويجب ضبط ارتفاع إطار iframe في الصفحة الرئيسية في الوقت المناسب وفقًا لارتفاع الصفحة الفرعية، الأمر الذي يتطلب أن تحتوي الصفحة على وظيفة تكيفية. فكرة التكيف بسيطة نسبيًا: يجب تعديل ارتفاع إطار iframe في الصفحة الرئيسية في الوقت المناسب وفقًا لارتفاع الصفحة الفرعية. نظرًا لأن عمليات js متضمنة، فإن الحلول التكيفية لأسماء النطاقات المختلفة تختلف، وذلك بشكل أساسي لحل المشكلات عبر النطاقات.

للارتفاع التكيفي تحت نفس اسم المجال الأصلي: صفحة www.chinaz.com/index.html تتضمن صفحة www.chinaz.com/xxx.html

1.0 رمز المفتاح في http://jipiao.taobao.com/index.htm

معرف <iframe = "J_selfAdapting" src = "http://www.chinaz.com/xxx.htm" mce_src = "http://www.chinaz.com/xxx.htm" إطار الحدود = "0" التمرير = "لا " style="height:0;"></iframe>

أضف JS التالي إلى الصفحة:

<mce:script type="text/javascript"><!--
(وظيفة(){
/**
* احصل على المجال الحالي
**/
وظيفة _getDomain(){
var _hostname = window.location.hostname.toString();
var _hosts = _hostname.split(".");
var _len = _hosts.length;
إذا(_لين>2){
return _hosts[_len-2]+"."+_hosts[_len-1];
}
إرجاع _اسم المضيف؛
}
document.domain = _getDomain();
})();
// --></mce:script>

2. قم بتضمين الكود التالي في الصفحة الفرعية http://www.chinaz.com/xxx.htm. هذا كل شيء


<mce:script type="text/javascript"><!--
(وظيفة(){
/**
* احصل على المجال الحالي
**/
وظيفة _getDomain(){
var _hostname = window.location.hostname.toString();
var _hosts = _hostname.split(".");
var _len = _hosts.length;
إذا(_لين>2){
return _hosts[_len-2]+"."+_hosts[_len-1];
}
إرجاع _اسم المضيف؛
}

window.onload = وظيفة ()
{
// قم بتعيين مجال الصفحة الفرعية
document.domain=_getDomain();
function_setHeight()
{
إذا (window.parent != window)
{
يحاول
{
// قم بتعيين ارتفاع إطار iframe الأصلي
parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px';
}
قبض (ه)
{
}
}
// اضبط كل ثانيتين، بحيث يكون متوافقًا بشكل أساسي مع تغييرات الارتفاع بعد تحميل الصفحة الفرعية.
setTimeout(_setHeight,2000);
}
// يتم الاتصال به مرة واحدة بعد تحميل الصفحة الفرعية
_setHeight();
}
})();
// --></mce:script>

الصفحات الأصلية المختلفة، مثل www.chinaz.com، book.chinaz.com لها أسماء نطاقات مختلفة تمامًا، والحل هو استخدام صفحة الوكيل www.chinaz.com/proxy.htm www.chinaz.com/index.htm. لتضمين الكتاب .chinaz.com/xxxx.htm، ويحتاج xxx.htm إلى إخفاء وتضمين www.chinaz.com/proxy.htm كوكيل، يمكنك كتابة الارتفاع في النهاية www.chinaz.com/proxy .htm#500 ، وهو ما يعني ارتفاع 500 بكسل.

1. رمز المفتاح في صفحة www.chinaz.com/index.htm:


<iframe id = "J_selfAdapting" src = "http://www.chinaz.com/xxxx.htm" mce_src = "http://www.chinaz.com/xxxx.htm" إطار الحدود = "0" التمرير = "لا " style="height:0;"></iframe>

أضف JS التالي:


  1. <mce:script type= "text/javascript" ><!--
  2. ( وظيفة (){
  3.      /**
  4. * احصل على المجال الحالي
  5. **/   
  6.      وظيفة _getDomain(){
  7.          var _hostname = window.location.hostname.toString();
  8.          var _hosts = _hostname.split( "." );
  9.          var _len = _hosts.length;
  10.          إذا (_لين>2){
  11.              return _hosts[_len-2]+ "." +_hosts[_len-1];
  12. }
  13.          إرجاع _اسم المضيف؛
  14. }
  15. document.domain = _getDomain();
  16. })();
  17. // --></mce:script>

2. الرموز الرئيسية في www.chinaz.com/xxxx.htm:


<iframe التمرير = "لا" إطار الحدود = "0" نمط = "عرض: لا شيء؛" mce_style = "عرض: لا شيء؛" http://www.chinaz.com/proxy.htm#597" id="taobaoIframe">
</iframe>


<mce:script type="text/javascript"><!--
(وظيفة(){
var pageHeight = document.body.scrollHeight;
document.getElementById('taobaoIframe').src = 'http://www.chinaz.com/proxy.htm#' + pageHeight;
})();
// --></mce:script>

3. جميع الرموز الموجودة في صفحة الوكيل book.chinaz.com/proxy.htm هي كما يلي:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</الرأس>
<الجسم>
<mce:script type="text/javascript"><!--
(وظيفة(){
/**
* احصل على المجال الحالي
**/
وظيفة _getDomain(){
var _hostname = window.location.hostname.toString();
var _hosts = _hostname.split(".");
var _len = _hosts.length;
إذا(_لين>2){
return _hosts[_len-2]+"."+_hosts[_len-1];
}
إرجاع _اسم المضيف؛
}
document.domain = _getDomain();
ارتفاع فار = window.location.hash.substring(1);
يحاول{
var el = window.top.document.getElementById('J_selfAdapting');
إذا (ش) {
el.style.height = height + 'px';
}
}
قبض (ه) {}
})();
// --></mce:script>
</الجسم>
</html>

مقالات ذات صلة