Một iframe có thể được thay đổi kích thước bất cứ khi nào nội dung của nó thay đổi.

Bạn đang xem : tự động thay đổi kích thước iframe để phù hợp với nội dung

Để bảo mật, một email được gửi đến cần bạn thực hiện. Để xác nhận đăng ký của bạn, hãy nhấp vào liên kết trong email đó.

Tự động thay đổi kích thước Iframe khi Kích thước nội dung thay đổi

Khung nội tuyến là một phần của trang web nơi nội dung của trang web khác có thể được xuất bản. Nó được thực hiện với thẻ iframe HTML.

Bài viết này mô tả cách tự động thay đổi kích thước chiều cao của iframe – bất cứ khi nào nội dung của trang web được xuất bản trong iframe thay đổi. (Thay đổi kích thước chiều rộng có thể được thực hiện bằng cách thay thế từng từ “chiều cao” bằng “chiều rộng”, duy trì kiểu chữ cái.)

Tất nhiên, khá đơn giản để điều chỉnh chiều cao của iframe khi nội dung tải lần đầu tiên. (Tôi cũng sẽ chỉ cho bạn cách làm điều đó.) Nhưng nếu nội dung trong iframe thay đổi, kích thước iframe có thể cần được điều chỉnh thêm.

Cách sử dụng phổ biến của iframe là để trình bày một biểu mẫu, vì vậy việc tải lại trang là không cần thiết khi biểu mẫu gửi đi. Sau khi biểu mẫu được gửi, trang cảm ơn sẽ được hiển thị trong iframe.

Tuy nhiên, trang cảm ơn thường có kích thước khác và đặt các thanh cuộn vào iframe hoặc để lại một vùng trống lớn trong iframe.

Do đó, kích thước iframe cần được điều chỉnh.

(Có những lý do khác khiến nội dung thay đổi trong iframe. Nguyên tắc tương tự được mô tả trong bài viết này có thể được sử dụng cho các triển khai khác.)

Lưu ý: URL của trang đang được xuất bản trong iframe phải nằm trên cùng một miền với trang web có thẻ iframe. Nếu không, trang web có thẻ iframe sẽ không thể xác định kích thước của nội dung trong iframe. Nó phải tuân theo giới hạn bảo mật same-origin được tích hợp sẵn.

Đây là ví dụ iframe thay đổi kích thước cho trang cảm ơn sau khi nhấp vào nút biểu mẫu:

Trước khi mô tả cách triển khai iframe tự động thay đổi kích thước cho trang web của bạn, đây là mã cho ví dụ trên. Có 3 tệp.

Tệp 1: Trang web chứa thẻ iframe cần phải chứa mã này:

& lt; div style = "border: 2px solid # 666; border-radius: 11px; padding: 20px;" & gt;

& lt; iframe id = "form-iframe" src = "iframe1form.html" style = "margin: 0; width: 100%; height: 150px; border: none; tràn: hidden;" scrolling = "no" onload = "AdjustIframeHeightOnLoad ()" & gt; & lt; / iframe & gt;

& lt; script type = "text / javascript" & gt;
function AdjustIframeHeightOnLoad () {document.getElementById ("form-iframe"). style.height = document.getElementById ("form-iframe"). contentWindow.document.body.scrollHeight + "px"; }
function AdjustIframeHeight (i) {document.getElementById ("form-iframe"). style.height = parseInt (i) + "px"; }
& lt; / script & gt;

& lt; / div & gt;

Mục đích của thẻ div chỉ là cung cấp đường viền với các góc tròn cho iframe. Ít nhất một số trình duyệt không triển khai các đường viền iframe với nhiều tính linh hoạt như thẻ div.

Tệp 2: Trang web (iframe1form.html) có chứa biểu mẫu:

XEM THÊM  Google Dịch - bản dịch tiếng anh google dịch

& lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" & gt;
& lt; title & gt; iFrame Resizing Test & lt; / title & gt;
& lt; / head & gt;
& lt; body style = "margin-top: 0; text-align: center;" & gt;

& lt; h1 style = "margin-top: 0;" & gt;
Kiểm tra thay đổi kích thước iFrame
& lt; / h1 & gt;

& lt; p & gt;
Khi nhấp vào nút biểu mẫu, trang cảm ơn sẽ tải.
& lt; / p & gt;
& lt; form method = "post" action = "iframe1th.html" & gt;
& lt; input type = "submit" value = "Nhấp vào" & gt;
& lt; / form & gt;

& lt; / body & gt;
& lt; / html & gt;

Tệp 3: Trang web (iframe1th.html) là trang cảm ơn:

& lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" & gt;
& lt; title & gt; iFrame Test Trang Cảm ơn & lt; / title & gt;
& lt; / head & gt;
& lt; body style = "margin-top: 0;" & gt;

& lt; div id = "page-container" & gt;

& lt; h1 style = "margin-top: 0; text-align: center; letter-spacing: 1px;" & gt;
Cảm ơn!
& lt; / h1 & gt;

& lt; / div & gt;

& lt; script type = "text / javascript" & gt;
parent.AdjustIframeHeight (document.getElementById ("page-container"). scrollHeight);
& lt; / script & gt;

& lt; / body & gt;
& lt; / html & gt;

Đặt tất cả ba tệp vào cùng một thư mục trên máy chủ của bạn. Nhập URL của tệp 1 vào trình duyệt của bạn. Bạn sẽ thấy chức năng tương tự như ví dụ trên, Kiểm tra thay đổi kích thước iFrame.

Khung nội tuyến được thay đổi kích thước khi nội dung của nó thay đổi.

Chia sẻ Twitter Tweet này

Dưới đây là tổng quan về cách nó hoạt động:

  1. Khi trang web có thẻ iframe tải, tệp iframe1form.html (trang có biểu mẫu) sẽ được tải vào thẻ iframe.

  2. Khi nhấp vào nút trong tệp iframe1form.html, tệp iframe1th.html (trang cảm ơn) được tải vào thẻ iframe, thay thế trang bằng biểu mẫu.

  3. Khi trang cảm ơn của tệp tải vào iframe, nó sẽ cho trang web có thẻ iframe biết chiều cao của iframe để chứa tất cả nội dung của trang cảm ơn.

Bây giờ, hãy nói về việc triển khai một hệ thống tương tự trên trang web của bạn.

Triển khai Iframe tự động thay đổi kích thước với Biểu mẫu

Hãy chuẩn bị các trang cuối cùng đến đầu tiên – trang cảm ơn, trang biểu mẫu, sau đó là trang có thẻ iframe.
Lý do thực hiện chúng theo thứ tự ngược là vì vậy vị trí của tệp được biết trước khi nó cần được chỉ định.

A. Trang cảm ơn

  1. Xóa lề trên khỏi trang web.

    Để JavaScript tính toán chiều cao cần thiết cho iframe, lề trên của trang web cần phải bằng không. Trong mã ví dụ trên, bạn sẽ thấy thẻ body có margin-top: 0; CSS nội tuyến. Ngoài ra, việc xóa lề trên khỏi thẻ body có thể được thực hiện trong biểu định kiểu.

    Chỉ phần lề trên được yêu cầu để loại bỏ. Nhưng tất cả các lề có thể được loại bỏ một cách an toàn.

    Nếu một lề trên vẫn được giữ nguyên, tính toán chiều cao của iframe sẽ bị tắt theo số lượng của lề ít nhất trong một số trình duyệt.

  2. Xóa lề trên của dòng nội dung đầu tiên.

    Tương tự như lề trên của trang, bất kỳ lề trên nào trong dòng đầu tiên của nội dung sẽ thực hiện phép tính chiều cao của iframe theo số lượng của lề. A style = “margin-top: 0;” Thuộc tính CSS nội tuyến nên thực hiện thủ thuật. Xem các thẻ h1 của các tệp ví dụ.

  3. Đặt nội dung trang cảm ơn vào một div.

    Ví dụ về thẻ div (phải có giá trị id):

    & lt; div id = "page-container" & gt;
    
    

    Lý do cho thẻ div là để JavaScript (mục tiếp theo trong danh sách) có thể tính toán chiều cao của nội dung. Vì vậy, hãy đặt thẻ div làm dòng đầu tiên bên dưới thẻ body và đóng & lt; / div & gt; ngay trên thẻ đóng & lt; / body & gt; nhãn.

  4. Đặt JavaScript ở cuối nội dung nội dung.

    Ngay bên dưới phần đóng & lt; / div & gt; (xem bước trước), chèn JavaScript này:

    & lt; script type = "text / javascript" & gt;
    parent.AdjustIframeHeight (document.getElementById ("page-container"). scrollHeight);
    & lt; / script & gt;
    
    

    Nếu giá trị id của div (mục danh sách trước đó) không phải là “page-container”, thì “page-container” trong JavaScript cần được thay đổi cho phù hợp.

    JavaScript chạy ngay sau khi div được tải. Khi chạy, nó sẽ báo cáo chiều cao nội dung của div tới JavaScript nằm trên trang web với thẻ iframe – thẻ này sau đó sẽ điều chỉnh chiều cao iframe.

  5. Tải trang cảm ơn lên máy chủ của bạn và ghi chú lại URL của nó.

XEM THÊM  Đã giải quyết: 4.17 LAB: Giá trị được phân tách bằng dấu phẩy của Tệp dữ liệu (.csv) - Phòng thí nghiệm 4.17: tệp dữ liệu

B. Trang có biểu mẫu

(Hai mục đầu tiên trong danh sách này giống với hai mục đầu tiên trong danh sách trang cảm ơn.)

  1. Xóa lề trên khỏi trang web.

    Để JavaScript tính toán chiều cao cần thiết cho iframe, lề trên của trang web cần phải bằng không. Trong mã ví dụ trên, bạn sẽ thấy thẻ body có margin-top: 0; CSS nội tuyến. Ngoài ra, việc xóa lề trên khỏi thẻ body có thể được thực hiện trong biểu định kiểu.

    Chỉ phần lề trên được yêu cầu để loại bỏ. Nhưng tất cả các lề có thể được loại bỏ một cách an toàn.

    Nếu một lề trên vẫn được giữ nguyên, tính toán chiều cao của iframe sẽ bị tắt theo số lượng của lề ít nhất trong một số trình duyệt.

  2. Xóa lề trên của dòng nội dung đầu tiên.

    Tương tự như lề trên của trang, bất kỳ lề trên nào trong dòng đầu tiên của nội dung sẽ thực hiện phép tính chiều cao của iframe theo số lượng của lề. A style = “margin-top: 0;” Thuộc tính CSS nội tuyến nên thực hiện thủ thuật. Xem các thẻ h1 của các tệp ví dụ.

  3. Chỉ định URL của trang cảm ơn làm giá trị cho thuộc tính hành động của biểu mẫu.

    Trang cảm ơn đã được tải lên máy chủ ở bước A.

  4. Tải trang có biểu mẫu lên máy chủ của bạn và ghi chú lại URL của nó.

C. Trang web có thẻ iframe

  1. Chèn thẻ iframe vào trang web.

    Đây là một ví dụ:

    & lt; iframe id = "form-iframe" src = "iframe1form.html" style = "margin: 0; width: 100%; height: 150px; border: none; tràn: hidden;" scrolling = "no" onload = "AdjustIframeHeightOnLoad ()" & gt; & lt; / iframe & gt;
    
    

    Thay đổi giá trị của thuộc tính src thành URL của trang có biểu mẫu được tải lên máy chủ ở bước B.

    Cả thuộc tính id và onload đều được yêu cầu. Phong cách có thể được thay đổi để phù hợp với việc triển khai của bạn.

    Giá trị id được sử dụng trong JavaScript (mục danh sách tiếp theo) và thuộc tính onload chạy JavaScript để điều chỉnh chiều cao iframe ngay sau khi iframe tải xong.

  2. Chèn JavaScript bên dưới iframe.

    Đặt JavaScript này ở đâu đó bên dưới iframe. Nó có thể nằm ở cuối trang và / hoặc được nhập từ một tệp bên ngoài.

    & lt; script type = "text / javascript" & gt;
    function AdjustIframeHeightOnLoad () {document.getElementById ("form-iframe"). style.height = document.getElementById ("form-iframe"). contentWindow.document.body.scrollHeight + "px"; }
    function AdjustIframeHeight (i) {document.getElementById ("form-iframe"). style.height = parseInt (i) + "px"; }
    & lt; / script & gt;
    
    

    Giá trị id của thẻ iframe trong mục danh sách trước đó được chỉ định trong JavaScript ở ba vị trí. Nếu giá trị id “form-iframe” của iframe bị thay đổi, cả ba vị trí trong JavaScript phải được thay đổi tương ứng.

    Hàm AdjustIframeHeightOnLoad () điều chỉnh chiều cao iframe khi iframe được tải lần đầu tiên. Hàm AdjustIframeHeight () điều chỉnh chiều cao khung nội tuyến khi được gọi từ JavaScript trong trang cảm ơn.

  3. Tải trang có thẻ iframe lên máy chủ của bạn và ghi chú lại URL của trang.

Để kiểm tra cài đặt của bạn, hãy nhập URL của trang có thẻ iframe vào trình duyệt của bạn.

Sau khi được triển khai, việc gửi biểu mẫu trong iframe cho phép toàn bộ quá trình gửi đến xác nhận diễn ra mà không cần tải lại trang web. Khung nội tuyến được thay đổi kích thước khi nội dung của nó thay đổi.

Sẽ Bontrager


Xem thêm những thông tin liên quan đến chủ đề tự động thay đổi kích thước iframe để phù hợp với nội dung

27. Working with CSS iframes – Full stack web development Tutorial Course

alt

  • Tác giả: WB Web Development Solutions
  • Ngày đăng: 2018-05-24
  • Đánh giá: 4 ⭐ ( 9913 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this FullStackWebDevelopment tutorial video, We are going to learn about iframes using custom css for the new website.

    We are going to build the second column on our web page and put a youtube video in it. The iframe tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. Here we are going to use the iframe to add an HTML snippet for the youtube video.

    After adding the video in the second column container we make our website mobile compatible. To make sure the items inside the column are placed at the proper distance to each other we apply a margin to the div inside which headers and forms are contained not the entire column div, along with some margin-left to the div tag of the second column.

    To make the website mobile compatible we override the column style to apply a new style when we are on mobile. We override the width and margin properties of both the column containers by applying a width: 100%; so that it occupies the entire screen space and margin:0; to remove any default margin styling of the browser. We also resize the length of the input text area of username and password and apply rounded corners to them.

    To resize the video to mobile view we apply styling to the div container inside which the iframe is placed. We set its position: relative; The element is positioned relative to its normal position and width: 100%; While applying the styling property we should be very very specific about the part of the website we want to style.

    —————————-

    Week 1: Day 5
    Section 4: Advanced CSS: Building and styling website
    Tutorial 27: Working with iframes

    —————————-
    Do subscribe and hit Bell Icon
    —————————-

    Follow us in social media handles for opportunities and code related support.

    Instagram: https://www.instagram.com/wb.web/
    Facebook: https://www.facebook.com/wbweb/
    Twitter: https://twitter.com/wbweb_in/
    LinkedIn: https://www.linkedin.com/company/wbweb/

    —————————-

    Got a question on the topic? Please share it in the comment section below and our experts will answer it for you.

    For more information, please write back to us at [email protected] or call us at IND: 7077568998

    After completing the course, write to [email protected] for internship or freelancing opportunities.

    For consultation or partnership, related queries drop a mail to [email protected]

Code điều chỉnh kích thước iframe YouTube video trong bài viết

  • Tác giả: thuvien-it.org
  • Đánh giá: 5 ⭐ ( 2335 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Làm cách nào tôi có thể chia tỷ lệ nội dung của iframe?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 5563 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Giải pháp của Kip sẽ hoạt động trên Opera và Safari nếu bạn thay đổi CSS…

Làm cách nào để tự động thay đổi kích thước hộp văn bản để phù hợp với nội dung trong Excel?

  • Tác giả: vi.extendoffice.com
  • Đánh giá: 4 ⭐ ( 7181 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

tự động thay đổi kích thước form phù hợp theo độ phân giải

  • Tác giả: diendan.congdongcviet.com
  • Đánh giá: 5 ⭐ ( 2836 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mình đang làm 1 bài tập sắp xếp nên cần 1 không gian cho việc mô phỏng sắp xếp. Khi mình làm xong trên máy mình chạy ngon lành nhưng khi mang qua máy khác thì nó không hiển thị hết toàn màn hình của form, do đó thấy rất khó chịu, mình thử kéo nhỏ lại kích thước của form nhung vẫn không khả thi lắm.
    Vậy xin hỏi mọi người làm cách nào để form và cả các button, textbox… trên form này có thể tự động thay đổi kích thước tùy ý khi mình chạy trên các máy khác nhau?
    cảm ơn!

iFrame là gì? Cách nhúng iFrame vào website sao cho tối ưu nhất?

  • Tác giả: wiki.matbao.net
  • Đánh giá: 5 ⭐ ( 1276 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: iFrame là gì? iFrame là thành phần hay thẻ tag của một HTML element giúp nhúng HTML, hình ảnh, video hay trang web khác vào website của mình.

Xem thêm các bài viết khác thuộc chuyên mục: WordPress

XEM THÊM  Hóa đơn định kỳ: Cách thiết lập hóa đơn tự động - vuông có thể thực hiện thanh toán tự động không

By DEVTEAM