iframe使用方法

工作中很多情況下，尤其是新舊項目更替時，我們不得不使用iframe來嵌套頁面。iframe使用起來十分簡單，使用方式如下：

import React, {
    Component
} from 'react';
import "@/config.js";
export default class AdvancedAnalysis extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Url: "https://mp.csdn.net/postedit",
        };
    }
    render() {
        return (
            <div className="iframe-page">
                <iframe id="bdIframe" src={this.state.Url} style={{ border: 0, width: "100%", height: "100%", minHeight: "calc(100vh - 117px)", }} />
            </div>
        );
    }
}

iframe頁面的寬高設置是一個棘手的問題：我們有時要根據設備寬高動態獲取。

 componentDidMount() {
        console.log(this.state.Url)
        // /**
        //     * iframe-寬高自適應顯示
        //     */
        // const oIframe = document.getElementById("bdIframe");
        // const deviceWidth = document.documentElement.clientWidth;
        // const deviceHeight = document.documentElement.clientHeight;
        // oIframe.style.width = Number(deviceWidth)+ "px"; //數字是頁面佈局寬度差值
        // oIframe.style.height = Number(deviceHeight) + "px"; //數字是頁面佈局高度差 
    }