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

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

الكاتب：Eve Cole وقت التحديث：2025-02-05 14:05:58

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

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

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

<iframe id = "j_selfadapting" src = "http://www.chinaz.com/xxx.htm" mce_src = "http://www.chinaz.com/xx.htm" framborder = "0" "style =" الارتفاع: 0 ؛

تتم إضافة الصفحة على النحو التالي JS:

<MCE: script type = "text/javaScript"> <!-
(وظيفة () {)
/**
* احصل على المجال الحالي
**/
وظيفة _getdomain () {
var _hostname = window.location.hostname.toString () ؛
var _hosts = _hostname.split (".") ؛
var _len = _hosts.length ؛
if (_len> 2) {{
return _hosts [_len-2]+"."+_ المضيفين [_len-1] ؛
}
return_hostname ؛
}
document.ndsain = _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 ؛
if (_len> 2) {{
return _hosts [_len-2]+"."+_ المضيفين [_len-1] ؛
}
return_hostname ؛
}

window.onload = function () ()
{{
// قم بتعيين مجال صفحة الطفل
document.ndsain = _getDomain () ؛
function_setheight ()
{{
إذا (window.parent! = نافذة)
{{
يحاول
{{
// اضبط ارتفاع الوالد iframe iframe
parent.document.getElementByid ("j_selfadapting").
}
الصيد (ه)
{{
}
}
// قم بإعداد كل 2 ثانية ، بشكل أساسي لتغيير الارتفاع بعد تحميل صفحة الصفحة
setTimeout (_setheight ، 2000) ؛
}
// بعد تحميل الصفحة الفرعية ، اتصل به مرة واحدة
_setheight () ؛
}
}) () ؛
// -> </mce: script>

صفحات الوالدين المختلفة ، مثل www.chinaz.com ، book.chinaz.com اسم المجال مختلف تمامًا. HTM 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" framebord = "0" scrolling = "no" "style =" الارتفاع: 0 ؛

أضف كما يلي 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. if (_len> 2) {{

  11. return _hosts [_len-2] + "."

  12. }

  13. return_hostname ؛

  14. }

  15. document.ndsain = _getDomain () ؛

  16. }) () ؛

  17. // -> </mce: script>

2. رمز المفتاح في www.chinaz.com/xxxx.htm:


<iframe scrolling = "no" frameBorder = "0" style = "Display: None ؛" http://www.chinaz.com/proxy.htm#597 "id =" taobaoiframe ">
</frame>


<MCE: script type = "text/javaScript"> <!-
(وظيفة () {)
var pageheight = document.body.scrollheight ؛
document.getElementByid ('taobaoiframe').
}) () ؛
// -> </mce: script>

3. جميع التعليمات البرمجية في صفحة الوكيل book.chinaz.com/proxy.htm كما يلي: على النحو التالي:


<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = gbk" />
</head>
<body>
<MCE: script type = "text/javaScript"> <!-
(وظيفة () {)
/**
* احصل على المجال الحالي
**/
وظيفة _getdomain () {
var _hostname = window.location.hostname.toString () ؛
var _hosts = _hostname.split (".") ؛
var _len = _hosts.length ؛
if (_len> 2) {{
return _hosts [_len-2]+"."+_ المضيفين [_len-1] ؛
}
return_hostname ؛
}
document.ndsain = _getDomain () ؛
var height = window.location.hash.substring (1) ؛
يحاول {
var = window.top.document.getElementById ('j_selfadapting') ؛
إذا (el) {{
el.style.height = الارتفاع + 'px' ؛
}
}
catch (e) {}
}) () ؛
// -> </mce: script>
</body>
</html>

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