What is the best way to ensure that an iframe adjusts its height to fit the content within a tabbed container?

Is there a way to dynamically set the height of an iframe to match the content inside it when clicking on a tabbed plane? Initially, I used a fixed height of 1000px. How can this be achieved?

<div class="container-fluid text-center">    

<div class="col-sm-12" style="margin-top:120px">

<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="pill" 
href="#projectOverview">OVERVIEW</a></li>
<li><a data-toggle="pill" href="#projectPosts">POSTS</a></li>
<li><a data-toggle="pill" href="#projectThreads">THREADS</a></li>
<li><a data-toggle="pill" href="#projectMembers">MEMBERS</a></li>
<li><a data-toggle="pill" href="#projectTasks">TASKS</a></li>
</ul>

</div>

<div class="tab-content col-sm-12">
<div id="projectOverview" class="tab-pane fade in active">
    <iframe  src="projectOverview.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
<div id="projectPosts" class="tab-pane fade">
  <iframe  src="projectPosts.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
<div id="projectThreads" class="tab-pane fade">
  <iframe  src="projectThreads.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
<div id="projectMembers" class="tab-pane fade">
 <iframe  src="projectMembers.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
<div id="projectTasks" class="tab-pane fade">
  <iframe  src="projectTasks.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
</div>

</div>
javascriptjqueryhtmlcssweb

Answer №1

If you want to access the content body of an iframe, one way to do it is by using the code this.contentWindow.document.body (assuming both domains are the same and there is no sandboxing). You can then execute a function like this:

$('iframe').on('load', function() {
     $(this).css('height',
         this.contentWindow.document.body.offsetHeight + 'px');
 });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the onclick function to not activate on the iOS safari browser?

My Shopify site works perfectly on all browsers except iOS Safari. When users try to click the "add to cart" button on this specific browser, it does not trigger the onclick function. This issue is unique to iOS Safari as the button works fine on desktop a ...

javascriptphpjqueryshopify

Error message encountered in Rails Webpacker: "Uncaught TypeError: $(...).tooltip is not recognized as a function

I am working on a Rails 6 application where I compile assets using Webpack 4.39.1 with the help of the Webpacker gem. In my webpack configuration file (config/webpack/environment.js), I have included JQuery 3.4.1 and Popper.js as part of the ProvidePlugin ...

javascriptruby-on-railsnode.jswebpack

Transferring elements from one array to multiple arrays

I have been working with the basics of JavaScript arrays and here is my code snippet: let arr = ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B&apos ...

javascriptarraysjson

Get hexa values from a colorpicker and use them as a background in an angularjs application

I'm currently working on an angularJS project and I've implemented an HTML color picker. My goal is to assign the selected color from the color picker to my div element, ensuring that the values are in hexadecimal format. Below is a snippet of my ...

angularjshtmlcolor-picker

How can I retrieve x-data from an external file using Alpine.js?

I recently started exploring Alpine.js and grasped the fundamentals, but I'm facing challenges when trying to move functions outside of inline script tags. Consider this snippet from index.html: <div x-data="{ loading: false }"/> &l ...

javascriptalpine.js

Creating animated direction indicators in the "aroundMe" style with ngCordova

I am attempting to recreate a compass or arrow similar to the one featured in the AroundMe Mobile App. This arrow should accurately point towards a pin on the map based on my mobile device's position and update as I move. I have been struggling to fi ...

javascriptangularjsgoogle-mapsionic-frameworkngcordova

Use jQuery to populate a span element with information that is solely obtainable within a foreach loop during the rendering of buttons

I am currently navigating through learning MVC, and I have hit a roadblock. Working with Web Forms was more familiar to me, so I find myself struggling quite a bit with this new framework. After dedicating most of my day to it, I realize I need some assist ...

javascriptjqueryasp.net-mvc

The app is not showing the Post Request message after it has been sent from the UI front end

I am currently developing a chat application using node.js, express.js, socket.io, and mongodb. However, I have encountered an issue during the Node.js and express.js implementation (socket.io and mongodb are not yet utilized). The problem is that the code ...

jquerynode.jsexpresspost

Can someone please help me figure out why the "setInterval" function in my script isn't functioning as expected?

I've been experimenting with controlling the refresh rate of drawn objects in a canvas using JavaScript. Even after going through the tutorials and examples on w3.school, I'm still unsure why the "setInterval" function is not executing the "gener ...

javascripthtmlcss

Why isn't the JavaScript if statement working properly when checking the length?

Below is an if statement that I have devised: var TotalMoney=0; var Orbs=0; if (TotalMoney.length==2) { Orbs+=1; } The intention behind this code snippet is to increase the value of "Orbs" by 1 when the digit length of "TotalMoney" equals 2. However, it& ...

javascripthtmlcssif-statementconditional-statements

Table for Selecting Radio Buttons in Form Submission

When creating a table of radio buttons, each user can only choose one radio button per column. I assigned the same name to each column - for example: if there are 20 radios in each line, then each column is named b1, b2, b3, b4... b20. The selection is wor ...

phpjqueryradio-button

Is it necessary to have the script tag as the first tag in the body of the HTML?

I have a script file that needs to be included by third party implementors on their web pages. It is crucial for this script to be the first tag within the body element, like so: <body> <script type="text/javascript" src="/my_script.js"></ ...

javascript

Creating a Commentary System in VueJS Similar to Medium

One feature that I admire in Medium is their commenting interface, which allows users to highlight specific portions of an article and leave comments. I am interested in integrating a similar commenting feature into a VueJS application. While researching ...

javascriptvue.jscomments

What is the best way to pinpoint particular text within a paragraph that includes numerous line breaks?

So here is the puzzling situation I'm grappling with. Here's a peek at the HTML snippet: <p>This paragraph has <br><br> two unusual line breaks <br><br> and it happens TWICE!</p> The problem arises when tryi ...

htmlcsscss-selectorsline-breaks

Tips for adding an animated box shadow in CSS without adjusting the shadow's direction

A unique box with a rotating animation was created, however, applying a box-shadow caused the shadow to also rotate along with the box. <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body{ displa ...

csscss-animations

Tips for excluding certain parameters in the jslint unparam block

While developing my angular app, I encountered an issue with jslint flagging an unused parameter. Typically in angular, the "$scope" is required as the first parameter in your controller definition. In my case, I prefer using the "this" keyword instead of ...

javascriptangularjsjslint

How to Disable a Button with JavaScript in a Vue.js Application Without Using jQuery

I'm currently in the process of transitioning old jQuery code to JavaScript for a Vue.js application. function DisableSubmit() { submitButton.prop('disabled', true); submitButton.attr('data-enabled-value', submitButton.val ...

javascriptjqueryvue.js

React Native has encountered an issue with an undefined object, resulting in an error

I have a JSON file with the following structure: { "main": { "first": { "id": "123", "name": "abc" }, "second": { "id": "321", "name": "bca" } } } Before making an AP ...

javascriptreactjsreact-nativereact-state

Need to know how to show a DIV for a specific time frame using Javascript?

One of the features I am looking to implement in my Django application is a display that notifies the user when one of their posts is about to start. The idea is to show a DIV element with the message: <div>“Will start soon”</div>, 15 minut ...

javascriptpythonjquerydjango

Issues with window.location.href on iOS devices are causing functionality problems

Problem: The ajax function is working correctly on Windows and Android devices, but it fails to work on iOS devices. It shows an alert message on Windows and Android, but nothing happens on iOS. I have tried using window.location.href, location.href, and l ...

jqueryajax