Điều chỉnh chiều rộng và chiều cao của iframe để phù hợp với nội dung trong đó

Tôi cần một giải pháp cho tính năng tự động điều chỉnh các widthvà heightmột iframeđể chỉ phù hợp với nội dung của nó. Điểm quan trọng là chiều rộng và chiều cao có thể được thay đổi sau khi iframeđã được tải. Tôi đoán tôi cần một hành động sự kiện để đối phó với sự thay đổi kích thước của cơ thể có trong iframe.

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

Trình cắm jQuery trình duyệt chéo .

Cross-bowser, thư viện tên miền chéo sử dụng mutationObserverđể giữ cho iFrame có kích thước phù hợp với nội dung và postMessageđể giao tiếp giữa iFrame và trang chủ. Hoạt động có hoặc không có jQuery.

Tất cả các giải pháp được đưa ra cho đến nay chỉ chiếm một lần thay đổi kích thước. Bạn đề cập rằng bạn muốn có thể thay đổi kích thước iFrame sau khi nội dung được sửa đổi. Để thực hiện việc này, bạn cần thực thi một chức năng bên trong iFrame (một khi nội dung được thay đổi, bạn cần phải khởi động một sự kiện để nói rằng nội dung đã thay đổi).

Tôi đã bị mắc kẹt trong một thời gian, vì mã bên trong iFrame dường như bị giới hạn ở DOM bên trong iFrame (và không thể chỉnh sửa iFrame) và mã được thực thi bên ngoài iFrame đã bị kẹt với DOM bên ngoài iFrame (và không thể ' t nhận một sự kiện đến từ bên trong iFrame).

Giải pháp xuất phát từ việc khám phá (thông qua hỗ trợ từ đồng nghiệp) rằng jQuery có thể được cho biết DOM sẽ sử dụng cái gì. Trong trường hợp này, DOM của cửa sổ cha.

Như vậy, mã như thế này sẽ làm những gì bạn cần (khi chạy bên trong iFrame):

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>

giải pháp một lớp lót để nhúng: bắt đầu với kích thước tối thiểu và tăng lên kích thước nội dung. không cần thẻ script.

<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>

Nếu nội dung iframe là từ cùng một tên miền, điều này sẽ hoạt động tốt. Nó không yêu cầu jQuery mặc dù.

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

Để thay đổi kích thước một cách linh hoạt, bạn có thể làm điều này:

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

Sau đó, trên trang mà iframe tải thêm điều này:

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

Đây là một giải pháp đa trình duyệt nếu bạn không muốn sử dụng jQuery:

/**
 * Resizes the given iFrame width so it fits its content
 * @param e The iframe to resize
 */
function resizeIframeWidth(e){
    // Set width of iframe according to its content
    if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
        e.width = e.contentWindow.document.body.scrollWidth;
    else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
        e.width = e.contentDocument.body.scrollWidth + 35;
    else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
        e.width = e.contentDocument.body.offsetWidth + 35;
}

Sau khi tôi đã thử mọi thứ trên trái đất, điều này thực sự hiệu quả với tôi.

index.html

<style type="text/css">
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;   
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>

Tôi đang sử dụng mã này để tự động điều chỉnh chiều cao của tất cả các iframe (với lớp autoHeight) khi chúng tải trên trang. Đã thử nghiệm và nó hoạt động trong IE, FF, Chrome, Safari và Opera.

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});

Đây là một giải pháp bằng chứng vững chắc

function resizer(id)
{

var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;

var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;

}

html

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>

Tôi sửa đổi một chút giải pháp tuyệt vời của Garnaph ở trên. Có vẻ như giải pháp của anh ấy đã sửa đổi kích thước iframe dựa trên kích thước ngay trước sự kiện. Đối với tình huống của tôi (gửi email qua iframe) tôi cần chiều cao iframe thay đổi ngay sau khi gửi. Ví dụ: hiển thị lỗi xác thực hoặc thông báo "cảm ơn" sau khi gửi.

Tôi vừa loại bỏ hàm click () lồng nhau và đưa nó vào html iframe của mình:

<script type="text/javascript">
    jQuery(document).ready(function () {
        var frame = $('#IDofiframeInMainWindow', window.parent.document);
        var height = jQuery("#IDofContainerInsideiFrame").height();
        frame.height(height + 15);
    });
</script>

Làm việc cho tôi, nhưng không chắc chắn về chức năng trình duyệt chéo.

Nếu bạn có thể kiểm soát cả nội dung IFRAME và cửa sổ cha thì bạn cần Trình tạo lại iFrame .

Thư viện này cho phép tự động thay đổi kích thước chiều cao và chiều rộng của cả iFrames cùng tên miền và phù hợp với nội dung chứa trong đó. Nó cung cấp một loạt các tính năng để giải quyết các vấn đề phổ biến nhất khi sử dụng iFrames, bao gồm:

• Thay đổi kích thước chiều cao và chiều rộng của iFrame thành kích thước nội dung.
• Hoạt động với nhiều iFrames lồng nhau.
• Xác thực tên miền cho iFrames tên miền chéo.
• Cung cấp một loạt các phương pháp tính kích thước trang để hỗ trợ bố cục CSS phức tạp.
• Phát hiện các thay đổi đối với DOM có thể khiến trang thay đổi kích thước bằng M mutObserver.
• Phát hiện các sự kiện có thể khiến trang thay đổi kích thước (Thay đổi kích thước cửa sổ, Hoạt hình và chuyển đổi CSS, Thay đổi định hướng và các sự kiện chuột).
• Nhắn tin đơn giản giữa iFrame và trang chủ thông qua postMessage.
• Sửa các liên kết trang trong iFrame và hỗ trợ các liên kết giữa iFrame và trang mẹ.
• Cung cấp các phương pháp định cỡ và cuộn tùy chỉnh.
• Hiển thị vị trí cha mẹ và kích thước khung nhìn cho iFrame.
• Hoạt động với ViewerJS để hỗ trợ các tài liệu PDF và ODF.
• Dự phòng hỗ trợ xuống IE8.

tất cả không thể làm việc bằng các phương pháp trên.

javascript:

function resizer(id) {
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body, html_ = doc.documentElement;

        var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
        var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);

        document.getElementById(id).style.height = height;
        document.getElementById(id).style.width = width;

    }

html:

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
         <input id="txtHeight"/>height     <input id="txtWidth"/>width     
        <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
        <iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
        <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
</div>

Env: IE 10, Windows 7 x64

Tôi đã tìm ra một giải pháp khác sau khi thử nghiệm. Ban đầu tôi đã thử mã được đánh dấu là 'câu trả lời hay nhất' cho câu hỏi này và nó không hoạt động. Tôi đoán là bởi vì iframe của tôi trong chương trình của tôi tại thời điểm đó đã được tạo động. Đây là mã tôi đã sử dụng (nó hoạt động với tôi):

Javascript bên trong iframe đang được tải:

window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };

Cần thêm 4 pixel trở lên theo chiều cao để xóa các thanh cuộn (một số lỗi / hiệu ứng lạ của iframe). Chiều rộng thậm chí còn xa lạ, bạn an toàn khi thêm 18px vào chiều rộng của thân máy. Đồng thời đảm bảo rằng bạn có css cho phần thân iframe được áp dụng (bên dưới).

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

Đây là html cho iframe:

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

Đây là tất cả các mã trong iframe của tôi:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        display:table;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
    </script>
</head>
<body>
    This is a test.<br>
    testing
</body>
</html>

Tôi đã thực hiện thử nghiệm trong chrome và một chút trong firefox (trong windows xp). Tôi vẫn còn nhiều thử nghiệm để làm, vì vậy xin vui lòng cho tôi biết làm thế nào điều này làm việc cho bạn.

Đây là cách tôi sẽ làm điều đó (được thử nghiệm trong FF / Chrome):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>

Dưới đây là một số phương pháp:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

VÀ KHÁC THAY ĐỔI

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

ĐỂ TRỞ NÊN KẾT HỢP VỚI 2 THAY ĐỔI NHƯ VẬY

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

HACK VỚI MÃ THỨ HAI

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Để ẩn các thanh cuộn của iFrame, cha mẹ được tạo "tràn: ẩn" để ẩn các thanh cuộn và iFrame được tạo để tăng tới 150% chiều rộng và chiều cao, buộc các thanh cuộn bên ngoài trang và vì cơ thể không ' t có thanh cuộn người ta có thể không mong đợi iframe vượt quá giới hạn của trang. Điều này ẩn các thanh cuộn của iFrame với chiều rộng đầy đủ!

nguồn: đặt chiều cao tự động iframe

Trong trường hợp ai đó đến đây: Tôi gặp vấn đề với các giải pháp khi tôi xóa div khỏi iframe - iframe không ngắn hơn.

Có một plugin Jquery thực hiện công việc:

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

Tôi tìm thấy resizer này để làm việc tốt hơn:

function resizer(id)
{

    var doc = document.getElementById(id).contentWindow.document;
    var body_ = doc.body;
    var html_ = doc.documentElement;

    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

    document.getElementById(id).height = height;
    document.getElementById(id).width = width;

}

Lưu ý các đối tượng phong cách được loại bỏ.

Trong jQuery, đây là tùy chọn tốt nhất với tôi, điều đó thực sự giúp tôi !! Tôi chờ đợi mà giúp bạn!

iframe

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>

Bối cảnh

Tôi đã phải tự làm điều này trong bối cảnh mở rộng web. Tiện ích mở rộng web này đưa một số giao diện người dùng vào mỗi trang và giao diện người dùng này nằm trong một iframe. Nội dung bên trong iframelà động, vì vậy tôi phải điều chỉnh lại chiều rộng và chiều cao của iframechính nó.

Tôi sử dụng React nhưng khái niệm này áp dụng cho mọi thư viện.

Giải pháp của tôi (điều này giả định rằng bạn kiểm soát cả trang và iframe)

Bên trong iframetôi đã thay đổi bodyphong cách để có kích thước thực sự lớn. Điều này sẽ cho phép các yếu tố bên trong bố trí bằng cách sử dụng tất cả các không gian cần thiết. Làm widthvà height100% không hoạt động với tôi (tôi đoán vì iframe có mặc định width = 300pxvà height = 150px)

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

Sau đó, tôi đã chèn tất cả giao diện người dùng iframe bên trong div và cung cấp cho nó một số kiểu

#ui-root {
  display: 'inline-block';     
}

Sau khi kết xuất ứng dụng của tôi bên trong này #ui-root(trong React tôi thực hiện điều này bên trong componentDidMount), tôi tính toán kích thước của div này và đồng bộ hóa chúng với trang mẹ bằng cách sử dụng window.postMessage:

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

Trong khung cha mẹ tôi làm một cái gì đó như thế này:

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)

Có thể tạo một IFrame "giống như ma" hoạt động như không có ở đó.

Xem http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

Về cơ bản, bạn sử dụng hệ thống sự kiện parent.postMessage(..)được mô tả trong https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

Điều này hoạt động tất cả các trình duyệt hiện đại!

Tôi biết bài viết đã cũ, nhưng tôi tin rằng đây là một cách khác để làm điều đó. Tôi chỉ thực hiện trên mã của tôi. Hoạt động hoàn hảo cả về tải trang và thay đổi kích thước trang:

var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;

function resizeIframe(){
    videoHeight = $('.video-container').height();//iframe parent div's height
    videoWidth = $('.video-container').width();//iframe parent div's width

    iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
    iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();


$(window).on('resize', function(){
    resizeIframe();
});

Javascript được đặt trong tiêu đề:

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

Ở đây có mã html iframe:

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

Biểu định kiểu Css

>

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }

Đối với thuộc tính chỉ thị angularjs:

G.directive ( 'previewIframe', function () {
return {
    restrict : 'A',
    replace : true,
    scope : true,
    link : function ( scope, elem, attrs ) {
        elem.on ( 'load', function ( e ) {
            var currentH = this.contentWindow.document.body.scrollHeight;
            this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
        } );
    }
};
} );

Lưu ý tỷ lệ phần trăm, tôi đã chèn nó để bạn có thể truy cập tỷ lệ thường được thực hiện cho iframe, văn bản, quảng cáo, v.v., chỉ cần đặt 0 nếu không thực hiện chia tỷ lệ

Đây là cách tôi đã tải nó lên hoặc khi mọi thứ thay đổi.

parent.jQuery("#frame").height(document.body.scrollHeight+50);

Rõ ràng có rất nhiều tình huống, tuy nhiên, tôi có cùng một tên miền cho tài liệu và iframe và tôi đã có thể giải quyết vấn đề này đến hết nội dung iframe của mình:

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

Điều này 'tìm thấy' thùng chứa cha mẹ và sau đó đặt độ dài thêm vào hệ số mờ 50 pixel để xóa thanh cuộn.

Không có gì ở đó để 'quan sát' sự thay đổi chiều cao tài liệu, điều này tôi không cần cho trường hợp sử dụng của mình. Trong câu trả lời của tôi, tôi mang theo một phương tiện để tham chiếu vùng chứa cha mà không sử dụng id được đưa vào nội dung cha / iframe.

Nếu bạn có thể sống với tỷ lệ khung hình cố định và bạn muốn một iframe đáp ứng , mã này sẽ hữu ích cho bạn. Đó chỉ là quy tắc CSS.

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Iframe phải có div là container.

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

Mã nguồn được dựa trên trang web này và Ben Marshall có một lời giải thích tốt.

Sự đơn giản :

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
    iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
    iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});

Nếu nội dung chỉ là một html rất đơn giản, cách đơn giản nhất là xóa iframe bằng javascript

Mã HTML:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

Mã Javascript:

function removeIframe(obj) {
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>