HTML iframe 内嵌网页

天天-top

已于 2022-12-01 15:14:40 修改

阅读量4.1k

点赞数

于 2020-07-02 15:32:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42336574/article/details/107085307

版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文探讨了在使用Django框架时，如何正确配置X-Frame-Options来解决iframe加载时的安全问题，并提供了动态调整iframe高度的JavaScript解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. HTML

<iframe src="https://cn.bing.com/"  width="100%" height="500px">
</iframe>

2. 请求URL显示错误： Refused to display 'http://127.0.0.1:8000/show/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

X-Frame-Options：X-Frame-Options - HTTP | MDN

Django中的X-Frame-Options设置：X-Frame-Options - HTTP | MDN

3. 设置iframe的高度根据网页的高度变化

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    // iFrame.width  = document.body.scrollWidth;
    iFrame.height = window.screen.height - 300;
}

window.addEventListener('DOMContentLoaded', function(e) {

    // var iFrame = document.getElementsByTagName( 'iframe' );
    // resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>