หน้าแรก>การสอนการออกแบบเว็บไซต์>การทำให้เว็บเป็นมาตรฐาน

หน้าเฟรม 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/xxx.htm" frameborder = "0" ::::::::::::::::::::::: กระทาน ::::::::::::::::::::::: กระทาน :::::::::::::::::::::::::::::::::::::::: กระทาน.

หน้าถูกเพิ่มดังต่อไปนี้ JS:

<mce: สคริปต์ประเภท = "ข้อความ/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.domain = _getDomain ();
-
// -> </mce: สคริปต์>

2. รหัสต่อไปนี้ถูกฝังอยู่ในหน้าย่อย http://www.chinaz.com/xxx.htm ถึง


<mce: สคริปต์ประเภท = "ข้อความ/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 ();
ฟังก์ชั่น _setheight ()
-
if (window.parent! = หน้าต่าง)
-
พยายาม
-
// ตั้งค่าความสูงของผู้ปกครอง -ระดับ iframe
parent.document.getElementById ("j_selfadapting"). style.height = document.body.scrollheight+ 'px';
-
จับ (e)
-
-
-
// ตั้งค่าทุก 2s ส่วนใหญ่จะเปลี่ยนความสูงหลังจากการโหลดหน้าหน้าเว็บ
Settimeout (_Setheight, 2000);
-
// หลังจากโหลดหน้าย่อยแล้วเรียกมันครั้งเดียว
_Setheight ();
-
-
// -> </mce: สคริปต์>

หน้าผู้ปกครองที่แตกต่างกันเช่น 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" frameborder = "0" scrolling = "no no" "style =" ความสูง: 0; "> </iframe>

เพิ่มดังนี้ JS:


  1. <mce: สคริปต์ประเภท = "ข้อความ/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.domain = _getDomain ();

  16. -

  17. // -> </mce: สคริปต์>

2. รหัสคีย์ใน www.chinaz.com/xxxx.htm:


<iframe scrolling = "no" frameBorder = "0" style = "จอแสดงผล: ไม่มี;" mce_style = "แสดง: ไม่มี; http://www.chinaz.com/proxy.htm#597 "id =" taobaoiframe ">
</iframe>


<mce: สคริปต์ประเภท = "ข้อความ/javascript"> <!-
(การทำงาน(){
var pageHeight = document.body.scrollheight;
document.getElementById ('taobaoiframe')
-
// -> </mce: สคริปต์>

3. รหัสทั้งหมดในหนังสือพร็อกซีหน้า 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: สคริปต์ประเภท = "ข้อความ/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.domain = _getDomain ();
var height = window.location.hash.substring (1);
พยายาม{
var = window.top.document.getElementById ('j_selfadapting');
if (el) {{
el.style.head = ความสูง + 'px';
-
-
จับ (e) {}
-
// -> </mce: สคริปต์>
</body>
</html>

บทความที่เกี่ยวข้อง