Setting Height Dynamically in nested iframe in asp.net core

Question

Main Page:

<iframe src="firstpage.html" onload="resizeFrame" />

<script> 
function resizeFrame(obj){ 
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}  
</script>

First Page:

<h4>First Page</h4>
<iframe src="secondpage.html" onload="resizeFrame" />
    
<script> 
function resizeFrame(obj){ 
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}  
</script>

Second Page:

<h4>Second Page</h4>
<iframe src="thirdpage.html" onload="resizeFrame" />
    
<script> 
function resizeFrame(obj){ 
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}  
</script>

Third Page:

<h4>Third Page</h4>
<iframe src="fourthpage.html" onload="resizeFrame" />
    
<script> 
function resizeFrame(obj){ 
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}  
</script>

I want to change the height of the MainPage iframe from the first page, second page, third page and so on. Can I get some good solutions. Also, content of iframe will be loaded dynamically so height of each level will be different.

https://stackoverflow.com/questions/20541182/html5-resize-top-level-document-iframe-from-inside-a-nested-iframe https://stackoverflow.com/questions/9162933/make-iframe-height-dynamic-based-on-content-inside-jquery-javascript https://github.com/davidjbradshaw/iframe-resizer https://stackoverflow.com/questions/23484485/jquery-auto-height-iframe-with-the-nested-iframe — react_or_angluar, Dec 19 '20 at 05:50
hi, your given link is exactly what I am looking for but it's not working in asp.net core project. can you suggest any working projects. — Pravin Yadav, Dec 19 '20 at 10:34
Hi @jqueryHtmlCSS Thanks for your support and perfect solutions. Its worked form !! — Pravin Yadav, Dec 20 '20 at 04:15

Pravin Yadav · Answer 1 · 2020-12-20T06:49:17.757

https://github.com/davidjbradshaw/iframe-resizer

This is the solutions. It's worked for me.

Don't forget to add below cdn:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js" integrity="sha512-HY1lApSG7xxx8mYzs/lxRs+c5AaDThRaa3pvQB6puiswvf2lWqMJVf+8qSGiL4ZXfHQoPIqbd1TlpqfycPo3cQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.contentWindow.min.js" integrity="sha512-FOf4suFgz7OrWmBiyyWW48u/+6GaaAFSDHagh2EBu/GH/1+OQSYc0NFGeGeZK0gZ3vuU1ovmzVzD6bxmT4vayg==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.contentWindow.js" integrity="sha512-RMBWitJB1ymY4l6xeYsFwoEgVCAnOWX/zL1gNwXjlUj78nZ8SVbJsZxbH/w0p2jDNraHkOW8rzQgcJ0LNSXWBA==" crossorigin="anonymous"></script>

Main Page:

<h4>Main Page</h4>
<iframe id="mainFrame" width="100%" scrolling="no"/>
<script type="text/javascript">
    
    $("iframe").iFrameResize({
        log: true, // Enable console logging
        inPageLinks: true,
        checkOrigin: false,
        onResized: function (messageData) {
            // Callback fn when message is received

        },
        onMessage: function (messageData) {
            // Callback fn when message is received
            parentIFrame.sendMessage(
                messageData.message + ' (via ' + $('iframe').attr('id') + ')'
            )
        },
        onClosed: function (id) {
            /// Callback fn when iFrame is closed

        }
    })
</script>

First Page:

<h4>First Page</h4>
    <iframe id="firstFrame" width="100%" scrolling="no"/>
    <script type="text/javascript">
        
        $("iframe").iFrameResize({
            log: true, // Enable console logging
            inPageLinks: true,
            checkOrigin: false,
            onResized: function (messageData) {
                // Callback fn when message is received
    
            },
            onMessage: function (messageData) {
                // Callback fn when message is received
                parentIFrame.sendMessage(
                    messageData.message + ' (via ' + $('iframe').attr('id') + ')'
                )
            },
            onClosed: function (id) {
                /// Callback fn when iFrame is closed
    
            }
        })
    </script>

Second Page:

<h4>Second Page</h4>
    <iframe id="secondFrame" width="100%" scrolling="no"/>
    <script type="text/javascript">
        
        $("iframe").iFrameResize({
            log: true, // Enable console logging
            inPageLinks: true,
            checkOrigin: false,
            onResized: function (messageData) {
                // Callback fn when message is received
    
            },
            onMessage: function (messageData) {
                // Callback fn when message is received
                parentIFrame.sendMessage(
                    messageData.message + ' (via ' + $('iframe').attr('id') + ')'
                )
            },
            onClosed: function (id) {
                /// Callback fn when iFrame is closed
    
            }
        })
    </script>

Third Page:

<h4>Third Page</h4>
    <iframe id="thirdFrame" width="100%" scrolling="no"/>
    <script type="text/javascript">
        
        $("iframe").iFrameResize({
            log: true, // Enable console logging
            inPageLinks: true,
            checkOrigin: false,
            onResized: function (messageData) {
                // Callback fn when message is received
    
            },
            onMessage: function (messageData) {
                // Callback fn when message is received
                parentIFrame.sendMessage(
                    messageData.message + ' (via ' + $('iframe').attr('id') + ')'
                )
            },
            onClosed: function (id) {
                /// Callback fn when iFrame is closed
    
            }
        })
    </script>

Glad to hear! Can you edit your answer to offer a code example of how this was used to address your problem? — Jeremy Caney, Dec 20 '20 at 04:20

Setting Height Dynamically in nested iframe in asp.net core

1 Answers1