Cách tự động định lại kích thước iFrame (giải pháp crossbrowser)

Question

Tôi đang cố gắng bao gồm một iframe trên trang Drupal. Cho đến nay tôi đã bao gồm thành công khung nhưng chức năng thay đổi kích thước chiều cao mà tôi đã viết chỉ hoạt động trong Internet Explorer. Mục tiêu của tôi là thay đổi kích thước công việc trongFirefox và Chrome. Tôi đã tìm kiếm trên Internet nhưng tôi không thể tìm thấy những gì tôi đang tìm kiếm. Dài câu chuyện ngắn, tôi muốn khung của tôi tự động thay đổi kích thước chiều cao của chính nó.

Đây là những gì tôi đã làm cho đến nay (đây là mã của trang HTML bao gồm trong Drupal):

<script type="text/javascript"> 
    function resize() { 
     var iframe = document.all.icw; 
     document.getElementById("icw").style.height = iframe.document.body.scrollHeight + "px"; 
    } 
</script> 
<iframe id="icw" src="XXXXX" width="100%" scrolling="no" onload="resize()"> 

Tôi hiểu rằng nếu iframe cuộc sống trên tên miền khác là giải pháp có thể khó khăn hơn do quyền. Đúng không?

Đây là những lỗi tôi nhận được trong Chrome và Firefox:

Chrome: không thể đọc thuộc tính 'cơ thể' không xác định

Chrome: nỗ lực hoạt Javascript để truy cập vào khung với URL XXX từ khung với URL YYY . Tên miền, giao thức và cổng phải phù hợp.

Firefox: document.all là undefined

EDIT: gì nếu tôi muốn thay đổi một trong những yếu tố iframe? Trong trường hợp của tôi, tôi cần thay đổi giá trị hộp văn bản. Tôi hiểu rằng tôi phải làm điều đó khi trang được tải nhưng tôi không thể tìm thấy giải pháp. Không có vấn đề mà tôi đặt mã tôi luôn luôn là một nhận được một

Không thể gọi phương thức 'getElementById' không xác định

khi tôi cố gắng truy cập vào textbox iFrame.

EDIT2: Đã đặt câu hỏi mới vì chúng không liên quan.

Answer 1

Giải pháp này hoạt động ngay cả tên miền chéo miễn là bạn có quyền truy cập cả hai. Có một loạt các trường hợp cạnh, nhưng ít nhất bạn có thể bắt đầu với điều này. Bạn cũng có thể thêm sự kiện hẹn giờ để đảm bảo iFrame luôn là kích thước chính xác, do đó bạn không bao giờ có thanh cuộn. Hãy nhớ rằng điều này chỉ hoạt động với trình duyệt hỗ trợ HTML5 do việc sử dụng postMessage.

Bên trong iFrame

function resize(){ 
    var body = document.body, 
    html = document.documentElement, 
    height = body.offsetHeight; 
    if(height === 0){ 
     height = html.offsetHeight; 
    } 
    parent.postMessage({'action':'RESIZE', 'height':height}, '*'); 
} 

Chánh

function handleMessage(e) { 
    if (e.data.action == 'RESIZE') { 
     var targetHeight = e.data.height; 
     $('#iFrame').height(targetHeight); 
    } 
} 

window.addEventListener("message", handleMessage, false); 

Answer 2

window.addEventListener("message", handleMessage, false); 

Mã này không làm việc cho IE.

Đối với IE sử dụng

window.attachEvent("onmessage", handleMessage, false); 

Answer 3

Kiểm tra thư viện này nhỏ mà thực hiện điều này và quản lý tất cả các trường hợp cạnh khác cho bạn.

https://github.com/davidjbradshaw/iframe-resizer