ต่อไป »

[น้องบิ้ว]

ดีคับ ทำตั้งแต่หัวค่ำจนเช้ายังไม่ได้นอน ผมไม่เก่ง อาศัยงม ลองผิดลองถูก ไปค้นเอามาจาก google  มันเป็น script auto height iframe  คือ หน้า iframe ที่เราดึงมาติดเว็บเรามันจะปรับความสูงของหน้าให้อัตโนมัติ โดยที่เราไม่ต้องกดหนด ความสูงของโค้ด iframe เลย จริงๆ script ใช้งานได้เพียงแต่ว่ามันดันใช้งานได้เฉพาะดึง content ในโดเมนเดียวกันเท่านั้น ถ้าต่างโดเมนมันจะไม่ทำงาน ดูตัวอย่างตามด้านล่างคับ

อันนี้หน้าตัวอย่าง content ที่มีเนื้อหายาวมากๆ ลองเข้าไปดูคับ ผมจะดึงมาใส่ใน iframe  มีสองโดเมนเพื่อทดสอบ
http://www.buildstory.com/content.html
http://www.deejaa.com/content.html

อันนี้หน้าที่ผมใส่ code iframe กดูตัวอย่างได้เลยคับ

1. http://www.buildstory.com/iframe_mydomain.html   ใช้ iframe เรียกหน้า http://www.buildstory.com/content.html   ในโดเมนเดียวกันทำงานได้ดีมันจะ auto height ปรับความสูงตามเนื้อหาหน้า content จริงให้เลย
โค้ดเรียกแบบนี้คับ จะเห็นว่าโดเมนเดียวกัน
  <iframe id = "myIframe"  onload = "setIframeHeight( this.id )" width="850" height="100%" scrolling="no" src="http://www.buildstory.com/content.html " frameborder="0" >
</iframe> 

2. แต่ http://www.buildstory.com/iframe_otherdomain.html    ใช้ iframe เรียกหน้า http://www.deejaa.com/content.html   คนละโดเมน มันไม่ยอม auto height โค้ดเรียกแบบนี้คับ คนละโดเมน script ไม่ทำงาน
  <iframe id = "myIframe"  onload = "setIframeHeight( this.id )" width="850" height="100%" scrolling="no" src="http://www.deejaa.com/content.html " frameborder="0" >
</iframe> 

ปัญหาคือ ถ้าใช้ script นี้มันใช้ได้แต่โดเมนเดียวกันเท่านั้นมันถึงจะ auto height ให้ พอต่างโดเมนมันใช้งานไม่ได้นะคับ ผมอยากให้มันใช้งานต่างโดเมนได้ด้วยนะคับ

ท่านใดพอแก้ได้บ้างไหมคับให้มันสามารถใช้กับโดเมนอื่นได้นะคับ ขอบคุณล่วงหน้าคับ

อันนี้โค้ดในส่วนของ head  ส่วน body ก็โค้ด iframe ด้านบนคับ

โค๊ด:

script type='text/javascript'>

function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
 var ifDoc, ifRef = document.getElementById( iframeId );

 try
 {   
  ifDoc = ifRef.contentWindow.document.documentElement;  
 }
 catch( e )
 { 
  try
  { 
   ifDoc = ifRef.contentDocument.documentElement;  
  }
  catch(ee)
  {   
  }  
 }
 
 if( ifDoc )
 {
  ifRef.height = 1;  
  ifRef.height = ifDoc.scrollHeight;
  
  /* For width resize, enable below.  */
  
  // ifRef.width = 1;
  // ifRef.width = ifDoc.scrollWidth; 
 }
}

</script>

[phaishow]

คือ iframe มันกำหนดว่าต้องเป็น protocal ประเภท "file" แต่ cross domain มันถือว่าเป็น protocal ประเภท "http" (ในโดเมนเดียวกันมันถือว่าเป็น file ครับ)
แล้ว script ที่ใช้ มันพยายามจะเข้าถึงข้อมูลของ file แต่เข้าไม่ได้เพราะมันไม่ใช่ file แต่เป็น http เพราะฉะนั้น มันจำหาค่าความกว้าง ความยาว บราๆๆ ไม่ได้ครับ

ปล. ถ้าผมเข้าใจไม่ผิดนะครับ

เพิ่มเติม:
ลองแบบนี้ไหมครับ ?

โค๊ด:

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
 var ifDoc, ifRef = document.getElementById( iframeId );

 try
 {   
  ifDoc = ifRef.contentWindow.document.documentElement;  
 }
 catch( e )
 { 
  try
  { 
   ifDoc = ifRef.contentDocument.documentElement;  
  }
  catch(ee)
  {   
  }  
 }
 
 if( ifDoc )
 {
  ifRef.height = 1;  
  ifRef.height = ifDoc.scrollHeight;
  
  /* For width resize, enable below.  */
  
  // ifRef.width = 1;
  // ifRef.width = ifDoc.scrollWidth; 
 }
}

// Accepts a url and a callback function to run.  
function requestCrossDomain( site, callback ) {  
    // If no url was passed, exit.
    if ( !site ) {
        alert('No site was passed.');
        return false;
    }

    // Take the provided url, and add it to a YQL query. Make sure you encode it!
    var yql = 'http://query.yahooapis.com/v1/public/yql?q='   encodeURIComponent('select * from html where url="'   site   '"')   '&format=xml&callback=?';

    // Request that YSQL string, and run a callback function.
    // Pass a defined function to prevent cache-busting.
    $.getJSON( yql, cbFunc );

    function cbFunc(data) {
    // If we have something to work with...
    if ( data.results[0] ) {
        // Strip out all script tags, for security reasons.
        // BE VERY CAREFUL. This helps, but we should do more.
        data = data.results[0].replace(/<script[^>]*>[sS]*?</script>/gi, '');

        // If the user passed a callback, and it  
        // is a function, call it, and send through the data var.  
        if ( typeof callback === 'function') {
            callback(data);
        }
    }
    // Else, Maybe we requested a site that doesn't exist, and nothing returned.
    else throw new Error('Nothing returned from getJSON.');
    }
}
requestCrossDomain('http://www.deejaa.com/content.html', function(results) {  
   $('#myIframe').contents().find('body').html(results);
   setIframeHeight('#myIframe');
});  
</script>
<iframe id="myIframe" width="850" height="100%" scrolling="no" frameborder="0" ></iframe> 

[น้องบิ้ว]

คือ iframe มันกำหนดว่าต้องเป็น protocal ประเภท "file" แต่ cross domain มันถือว่าเป็น protocal ประเภท "http" (ในโดเมนเดียวกันมันถือว่าเป็น file ครับ)
แล้ว script ที่ใช้ มันพยายามจะเข้าถึงข้อมูลของ file แต่เข้าไม่ได้เพราะมันไม่ใช่ file แต่เป็น http เพราะฉะนั้น มันจำหาค่าความกว้าง ความยาว บราๆๆ ไม่ได้ครับ

ปล. ถ้าผมเข้าใจไม่ผิดนะครับ

เพิ่มเติม:
ลองแบบนี้ไหมครับ ?

โค๊ด:

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
 var ifDoc, ifRef = document.getElementById( iframeId );

 try
 {   
  ifDoc = ifRef.contentWindow.document.documentElement;  
 }
 catch( e )
 { 
  try
  { 
   ifDoc = ifRef.contentDocument.documentElement;  
  }
  catch(ee)
  {   
  }  
 }
 
 if( ifDoc )
 {
  ifRef.height = 1;  
  ifRef.height = ifDoc.scrollHeight;
  
  /* For width resize, enable below.  */
  
  // ifRef.width = 1;
  // ifRef.width = ifDoc.scrollWidth; 
 }
}

// Accepts a url and a callback function to run.  
function requestCrossDomain( site, callback ) {  
    // If no url was passed, exit.
    if ( !site ) {
        alert('No site was passed.');
        return false;
    }

    // Take the provided url, and add it to a YQL query. Make sure you encode it!
    var yql = 'http://query.yahooapis.com/v1/public/yql?q='   encodeURIComponent('select * from html where url="'   site   '"')   '&format=xml&callback=?';

    // Request that YSQL string, and run a callback function.
    // Pass a defined function to prevent cache-busting.
    $.getJSON( yql, cbFunc );

    function cbFunc(data) {
    // If we have something to work with...
    if ( data.results[0] ) {
        // Strip out all script tags, for security reasons.
        // BE VERY CAREFUL. This helps, but we should do more.
        data = data.results[0].replace(/<script[^>]*>[sS]*?</script>/gi, '');

        // If the user passed a callback, and it  
        // is a function, call it, and send through the data var.  
        if ( typeof callback === 'function') {
            callback(data);
        }
    }
    // Else, Maybe we requested a site that doesn't exist, and nothing returned.
    else throw new Error('Nothing returned from getJSON.');
    }
}
requestCrossDomain('http://www.deejaa.com/content.html', function(results) {  
   $('#myIframe').contents().find('body').html(results);
   setIframeHeight('#myIframe');
});  
</script>
<iframe id="myIframe" width="850" height="100%" scrolling="no" frameborder="0" ></iframe> 

ขอบคุณมากคับผม แต่ว่ายังลองแล้วยังไม่ได้นะคับ มันบอกว่าบรรทัดนี้ error คับ หรือผมไม่รู้จะใส่ถูกไหม
    // Take the provided url, and add it to a YQL query. Make sure you encode it!
    var yql = 'http://query.yahooapis.com/v1/public/yql?q='   encodeURIComponent('select * from html where url="'   site   '"')   '&format=xml&callback=?';

ผมลองใส่ code ที่คุณบอกมาตามนี้คับ มันมี error นะคับ ลองดูคับว่าผมทำพลาดตรงไหนแหะๆ
http://www.buildstory.com/iframe_phaishow.html


ผมไปค้นหาใน google เพิ่มเติมเกี่ยวกับ cross domain  แต่ไม่รู้จะเอามาใช้ยังไงนะคับ พอจะแก้ให้ผมได้ไหมคับ ขอบคุณล่วงหน้าคับผม
- http://stackoverflow.com/quest...ross-domain-using-url-fragment
- http://stackoverflow.com/quest...-cross-domain-iframe-resize-qa
 

[phaishow]

http://dvwzj.in/temp/xdr.html

ดูที่เว็บเลยครับ
script ก็อปจาก textarea ในเว็บ(ด้านล่าง)เอานะครับ ผมทำให้แล้ว ก็อปจากในนี้มันเปลี่ยน code ครับ