首页iframe 宽高自适应

iframe 宽高自适应

时间: 2023-11-20 16:50:33 浏览: 94

可以通过以下方法实现 iframe 宽高自适应： 1. 使用 JavaScript 动态计算 iframe 的宽高，并设置给 iframe 元素。 2. 在 iframe 内部页面中，使用 JavaScript 获取父页面的宽高，并设置给 iframe 内部元素。具体实现方法可以参考以下代码： 1. 使用 JavaScript 动态计算 iframe 的宽高，并设置给 iframe 元素。 ```html <iframe id="my-iframe" src="http://example.com"></iframe> <script> var iframe = document.getElementById('my-iframe'); iframe.onload = function() { var contentWindow = iframe.contentWindow; var contentDocument = contentWindow.document; var contentBody = contentDocument.body; var contentWidth = contentBody.scrollWidth; var contentHeight = contentBody.scrollHeight; iframe.style.width = contentWidth + 'px'; iframe.style.height = contentHeight + 'px'; }; </script> ``` 2. 在 iframe 内部页面中，使用 JavaScript 获取父页面的宽高，并设置给 iframe 内部元素。 ```html <!DOCTYPE html> <html> <head> <title>My Iframe Page</title> <script> window.onload = function() { var parentWindow = window.parent; var parentDocument = parentWindow.document; var parentBody = parentDocument.body; var parentWidth = parentBody.clientWidth; var parentHeight = parentBody.clientHeight; var myElement = document.getElementById('my-element'); myElement.style.width = parentWidth + 'px'; myElement.style.height = parentHeight + 'px'; }; </script> </head> <body> <div id="my-element"></div> </body> </html> ```

阅读全文