Question

我之前曾问过这个问题，但是我认为我没有给出一个很好的示例。

所以我拥有的是一个带有iframe的页面：

            <script> jQuery(document).ready(function($){ var iframe_width = $( '#appframe' ).parent().width(); console.log('width: '+ iframe_width); $( '#appframe' ).css('width', iframe_width); }); 


        </script>




            <script>
                            function iframeLoaded() {
                                    var iFrameID = document.getElementById('appframe');
                                    if(iFrameID) {
                                // // here you can make the height, I delete it first, then I make it again
                                         iFrameID.height = '';

                                         if (iFrameID.height != iFrameID.contentWindow.document.body.scrollHeight + 'px') {



                                                iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + 'px';


                                         }


                                         //console.log(iFrameID.height)
                                    }   
                                    setTimeout(iframeLoaded, 100);
                            }

             </script>    
<iframe src='test.html frameborder='0' scrolling='no' id='appframe' onload='iframeLoaded()'></iframe>

现在，简而言之... iframe页面test.html可能具有指向其他页面的链接，例如test2.html ...，但是test2.html可能包含更多内容，因此其高度比上一页更大。

使用我的代码，它会每100毫秒不断检查iframe源高度。尽管它可以工作，但是它并不完美，因为它似乎占用了大量资源，并且在向下滚动页面时有时会变得不方便（以及在google dev控制台中工作）。

是否有更好的解决方案？像一个听众？一个jQuery插件？

有人愿意分享吗？

动态iFrame-基于内容的更改

0 个答案: