Hướng dẫn Embedding Responsive iframes trong Drupal site

Hướng dẫn Embedding Responsive iframes trong Drupal site

Implementing iframe elements can be troublesome for both content editors and developers, that's even before trying to make them responsive. After some recent project work I'm here to tell you there is an easy way to handle them.

Components

Responsive child page

For this project the child page was themed so it was already responsive and fit the entire width of the page so it would work with any iframe size.

Link iframe formatter module

The initial setup is straight forward:

  1. Download Link iframe formatter module and enable.
  2. Assign a link field to a content type so the content editor doesn't have to worry about markup.
  3. Setup the display of the link field to "Link iframe formatter"

We now have the initial ground work complete. Now comes the fun part, making the iframe responsive.

Responsive iframes libraray

For our recent project we chose the Responsive iframes library. It's simple (the code can be read through in about 5min) and initial implementation is very simple.

<!-- Activate responsiveness in the "child" page -->

<script src="/js/jquery.responsiveiframe.js"></script>

<script>

  var ri = responsiveIframe();

  ri.allowResponsiveEmbedding();

</script>

  

<!-- Corresponding code in the "parent" page -->

<script src="/js/jquery.js"></script>

<script src="/js/jquery.responsiveiframe.js"></script>

<script>

  ;(function($){          

      $(function(){

        $('#myIframeID').responsiveIframe({ xdomain: '*'});

      });        

  })(jQuery);

</script>

Note: The above was taken from the Responsive iframe project page.

Issues we had to overcome

Page elements updating

Responsive iframe library triggers a resize when the screen size changes. With this in mind we ran into an issue where the child (the page we are displaying in the iframe) would have elements update and add additional height, causing elements to disappear in the borders of the iframe. After reading through the library and some googling I ended up with the following solution. The following is javascript that is added to the child page. It watches for changes in the DOM and sends notifications to the parent.

// When fields are updated (invalid content).

$('form').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {

ri.messageParent();

})

Disable scrolling to top of page

By default, if the iframe size updates the parent page scrolls to the top, we don't want that. After reading through the code I was able to use the following as a solution on the parents end:

$("#myIframeID").responsiveIframe({ scrollToTop: false });

Note: This is an update to the existing javascript.

How to determine if the child page is in an iframe

We had a requirement to set some css for the child iframe. In this case we only wanted to set the style when the child was in the iframe. Since we cannot set css from the parent, we came up with the following solution.

if (window.self != window.top) {

$("html").css('overflow' , 'hidden');

}

Conclusion

Here are some simple elements that ended up making the project work a success. Please let me know approaches you have taken in the comments below.

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy Tran owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy
  • Phone/Zalo: (+84) 944 225 212
  • WhatsApp: (+84) 944 225 212
  • Line Messenger: (+84) 944 225 212
  • Email: [email protected]
  • Telegram Messenger: https:/t.me/tommytran0401

Quảng cáo việc làm

 

Thích hợp các bạn nữ mảng thợ may làm việc tại nước NGA

Đơn hàng Tuyển dụng 100 Thợ may đi Nga(đợt 1 tháng 3.2021, đợt 2 tháng 5.2021). Lương thực lãnh 800 USD, bao ăn ở, vé máy bay và visa, phí xuất cảnh(1800 USD)trả khi đi làm có lương. Bạn có thể liên hệ CÔNG TY qua Phone/Zalo: (+84) 944 225 212. Công ty sẽ tư vấn cho bạn.

Xem chi tiết: >>> https://bit.ly/3o9NOfR

Tìm kiếm bất động sản

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Xác định độ khó của từ khóa

Xác định độ khó của từ khóa

Độ khó của từ khóa được chia thành 7 cấp độ như sau: Độ khó từ 0 - 15% | Không cạnh tranh (tối ưu hóa trong trang để đạt được vị trí cao)...

phong thi nghiem sawaco

Ứng dụng công nghệ giám sát chất lượng nước tại Phòng thí nghiệm Tổng Công ty Cấp nước Sài Gòn TNHH MTV

Tổng công ty Cấp nước Sài Gòn (Sawaco) thực hiện nhiều biện pháp để theo dõi, kiểm tra chất lượng nhằm đảm bảo cung cấp nước sạch đến người tiêu dùng luôn đáp ứng theo yêu cầu về chuẩn kỹ thuật quốc gia do Bộ Y tế quy định. 

Galaxy S II HD Review : First Look

Galaxy S II HD Review : First Look

Samsung has announced two Galaxy S II variants for its domestic market. First is the Galaxy S II LTE that was announced at the IFA sometime back.

Wordpress Freelancer

 

Wordpress Freelancer