在asp.net核心的嵌套iframe中动态设置高度

Question

主页：

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

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

首页：

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

第二页：

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

第三页：

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

我想从第一页、第二页、第三页等更改 MainPage iframe 的高度。我可以得到一些好的解决方案。此外，iframe 的内容会动态加载，因此每个级别的高度会有所不同。

Answer 1

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

这就是解决方案。它对我有用。

不要忘记在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>

主页：

<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>

首页：

<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>

第二页：

<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>

第三页：

<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>