Retrieve Iframe Height with Ajax Call

65
December 03, 2021, at 10:10 AM

I have found many questions here about getting iframe's height and set it via Javascript or jQuery however in my case none have worked. I've installed MailChimp Plugin on a wordpress website to load the newsletters within tabs based on years and months.

I'm using ajax to call and return the value of iframe thus the iframe is dynamic and the content as well. So I tried all possible ways to load the correct and accurate height of the parsed link however it's not getting the accurate result.

Below is my code:

jQuery(function() {
    jQuery('label.tab-label').click(function() {
        // this.id retrieves the id attribute/property value
        // of the 'this' element (here the clicked <a> element:
        var id      = jQuery(this).data("id");
        var input   = jQuery('input[name="tab"]');
        input.attr('id', 'tab' + id);
        // Reset iFrame Load
        // if (jQuery('.wp-embedded-content').size()){
        //     jQuery('iframe').remove();
        // }
        var wpajax_url = document.location.protocol + '//' + document.location.host + '/wp-admin/admin-ajax.php?action=get_content';
        jQuery.ajax({
                cache: false,
                timeout: 0,
                url: wpajax_url,
                data: {post_id: id},
                dataType: "json",
                type: 'POST',
                success: function(data) {
                    jQuery("div.tab-content").html( data );
                    jQuery('iframe').attr('allowfullscreen', 'allowfullscreen'); 
                    jQuery("div.tab-content").find("iframe").removeAttr("height");
                    jQuery('iframe').attr('id','newsletter-frame');
                    function getHeight()
                    {
                        var body = document.body;
                        var html = document.documentElement; 
                        var bodyH = Math.max( body.clientHeight, body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
                        return bodyH;
                    }
                    var height =  jQuery('iframe').innerText = getHeight();
                    console.log('Height is', height);
                    jQuery("div.tab-content").find("iframe").attr("height", height);
                },
                error: function(data) {
                    jQuery("#tab-content").html( 'something went wrong' );
                }
        });
        return false;
    });
});   

Did anyone experienced that before and have the correct solution to return dynamically the iframe height with 100% accuracy.

Note also neither CSS has resolved the issue nor the height attribute.

READ ALSO
I don&#39;t understand how ListView works in Flutter?

I don't understand how ListView works in Flutter?

I have at the data area I/II/III

88
Trying to make a table that scrolls vertically, with a static section and a section that scrolls horizontally

Trying to make a table that scrolls vertically, with a static section and a section that scrolls horizontally

I am trying to use CSS to create a table with some specific traitsI want the table to scroll vertically, as there might be a lot of rows and I want to keep it within the view of the client's screen

65
Vue 3 yarn serve stuck at 42% when importing external js file

Vue 3 yarn serve stuck at 42% when importing external js file

Vue 3 yarn serve stuck at 42% when I try to import an external js file into maints

48
Spring boot app gives error circular references why?

Spring boot app gives error circular references why?

I have this Configuration class:-

230