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

โซลูชันการปรับความสูงการใช้งานหน้าเฟรม 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 id="J_selfAdapting" src="http://www.chinaz.com/xxx.htm" mce_src="http://www.chinaz.com/xxx.htm" frameborder="0" scrolling="no " style="height:0;"></iframe>

เพิ่ม JS ต่อไปนี้ลงในเพจ:

<mce:script type="text/javascript"><!--
(การทำงาน(){
-
* รับโดเมนปัจจุบัน
-
ฟังก์ชั่น _getDomain(){
var _hostname = window.location.hostname.toString();
var _hosts = _hostname.split(".");
var _len = _hosts.ความยาว;
ถ้า(_len>2){
กลับ _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.ความยาว;
ถ้า(_len>2){
กลับ _hosts[_len-2]+"."+_hosts[_len-1];
-
กลับ _ชื่อโฮสต์;
-

window.onload = ฟังก์ชั่น()
-
//กำหนดโดเมนของเพจย่อย
document.domain=_getDomain();
function_setHeight()
-
ถ้า (window.parent != หน้าต่าง)
-
พยายาม
-
//กำหนดความสูงของ parent iframe
parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px';
-
จับ(จ)
-
-
-
//ตั้งค่าทุกๆ 2 วินาที เพื่อให้เข้ากันได้กับการเปลี่ยนแปลงความสูงหลังจากโหลดเพจย่อยเป็นหลัก
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 ซึ่งหมายถึงความสูง 500px

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 " 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.ความยาว;
  10.          ถ้า (_len>2){
  11.              กลับ _hosts[_len-2]+ "." +_hosts[_len-1];
  12. -
  13.          กลับ _ ชื่อโฮสต์;
  14. -
  15. document.domain = _getDomain();
  16. -
  17. // --></mce:script>

2. รหัสสำคัญใน www.chinaz.com/xxxx.htm:


<iframe scrolling="no" frameborder="0" style="display: none;" mce_style="display: none;" src="http://www.chinaz.com/proxy.htm#597" mce_src=" 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#' + ความสูงเพจ;
-
// --></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.ความยาว;
ถ้า(_len>2){
กลับ _hosts[_len-2]+"."+_hosts[_len-1];
-
กลับ _ชื่อโฮสต์;
-
document.domain = _getDomain();
ความสูง var = window.location.hash.substring(1);
พยายาม{
var el = window.top.document.getElementById('J_selfAdapting');
ถ้า(เอล) {
el.style.height = ความสูง + 'px';
-
-
จับ (จ) {}
-
// --></mce:script>
</ร่างกาย>
</html>

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