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

Posted 2023-05-09

【中文标题】在asp.net核心的嵌套iframe中动态设置高度

【英文标题】：Setting Height Dynamically in nested iframe in asp.net core

【发布时间】：2021-03-29 10:13:16

【问题描述】：

主页：

<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 的内容会动态加载，因此每个级别的高度会有所不同。

【问题讨论】：

显示你的代码在某处运行。

github.com/PRAVP007/iFrameTest

***.com/questions/20541182/… ***.com/questions/9162933/… github.com/davidjbradshaw/iframe-resizer ***.com/questions/23484485/…

嗨，您给定的链接正是我正在寻找的，但它在 asp.net 核心项目中不起作用。你能推荐任何可行的项目吗？

嗨@jqueryHtmlCSS 感谢您的支持和完美的解决方案。它的工作形式！！

【参考方案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"  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"  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"  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"  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>

【讨论】：

很高兴听到！您能否编辑您的答案以提供一个代码示例来说明如何使用它来解决您的问题？