1

在尝试制作空白的 WordPress Dashboard 并将 iframe 插入空白空间时，我发现 iframe 只能具有固定高度。

但是要很好地集成这种定制，需要 100% 的高度。

在这个WordPress StackExchange Q&A中，我编写了制作完全空白仪表板的技术，隐藏图标和标题、屏幕选项和所有小部件（默认并由插件添加）。

不是空白的 WordPress 仪表板

如果我使用以下 jQuery 注入 iframe，它不会占据 100% 的高度，无论我添加什么 CSS 到管理样式表...

$('#wpbody').html(
    '<iframe src="http://example.com" 
     frameborder="0" id="myframe"  
     style="height:100%;margin:0;padding:0;left:0;top:0" 
     scrolling="auto" width="100%" height="100%"></iframe>'
);

问题是：如何让 iframe 填满所有#wpbody空间并保持这种状态？

4

1 回答 1

2

在这篇博 文中找到了解决方案（非常感谢 Jim，漂亮的代码！）。

再加上WordPress StackExchange Q&A，以下内容将在仪表板屏幕内显示一个完整大小的 iframe。

add_action( 'admin_head-index.php', 'wpse_73561_dashboard_scripts' );

function wpse_73561_dashboard_scripts() 
{
    ?>
        <style>
            .wrap h2, .postbox .handlediv, #icon-index { display:none }
            #wpcontent { margin-left:0 !important }
        </style>
        <script language="javascript" type="text/javascript">   
            function sizeIFrame() 
            {
                var helpFrame = jQuery("#myframe");
                var innerDoc = (helpFrame.get(0).contentDocument) 
                ? helpFrame.get(0).contentDocument 
                : helpFrame.get(0).contentWindow.document;

                helpFrame.height(innerDoc.body.scrollHeight + 35);
            }

            jQuery(function() 
            {
                sizeIFrame();
                jQuery("#myframe").load(sizeIFrame);
            });

            jQuery(document).ready(function($) 
            {
                $('#wpbody').html(
                    '<iframe src="http://example.com" 
                     frameborder="0" id="myframe" 
                     style="margin:0;padding:0;left:0;top:0" 
                     scrolling="auto" 
                     width="100%" height="100%"></iframe>'
                );
            });
        </script>   
    <?php
}
于 2012-11-22T02:38:07.790 回答