devops 高度自适应

src/forge/DevOps/Index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import { WhiteBack } from '../Component/layout';
 import './ops.scss';
 
@@ -32,12 +32,42 @@ const Params = Loadable({
 })
 
 export default ((props)=>{
+  console.log('props', props);
   const {jianmu_devops} = props;
 
+  useEffect(() => {
+    window.addEventListener("message", iframeHeight, false);
+    return () => {
+      window.removeEventListener("message", iframeHeight, false);
+    }
+  })
+
+
+  function iframeHeight(e){
+    console.log('e',e&&typeof(e.data), e);
+    if (e && e.data && typeof(e.data) === "string") {
+      let myHeight = JSON.parse(e.data);
+      if (document.querySelector("#devopsIframe")) {
+        document.querySelector("#devopsIframe").height = myHeight.height;
+      }
+    }
+  }
+
+  function iframeLoad() {
+    try {
+      let myIframe = document.getElementById("devopsIframe");
+      if (myIframe.contentDocument) {
+        myIframe.height = myIframe.contentDocument.querySelector('.el-main').clientHeight + 260;
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
   return(
     <WhiteBack className="opsPanel main">
       {/* 嵌入devops */}
-      {jianmu_devops && <iframe title={`devopsIframe`} src={`https://ci-v3.test.jianmuhub.com/oauth2/authorize?code=${jianmu_devops}`} id={`devopsIframe`} frameBorder="0" name={`devopsIframe`} width="100%" height={600}></iframe>}
+      {jianmu_devops && <iframe title={`devopsIframe`} src={`https://ci-v3.test.jianmuhub.com/oauth2/authorize?code=${jianmu_devops}`} id={`devopsIframe`} frameBorder="0" name={`devopsIframe`} width="100%" onLoad={iframeLoad} height={'auto'}></iframe>}
       {/* 旧引擎页面 */}
       {/* <Switch {...props}>
         <Route path="/:owner/:projectsId/devops/params"

src/forge/Server/data.jsx

@@ -72,8 +72,6 @@ function Data(props) {
 
 
   function iframeHeight(e){
-    console.log('iframeHeight');
-    console.log(e.data);
     if (e && e.data && viewBase && e.origin && viewBase.indexOf(e.origin)>-1) {
       let myHeight = JSON.parse(e.data);
       if (document.querySelector("#htmlIframe")) {
@@ -134,9 +132,7 @@ function Data(props) {
   function iframeLoad() {
     try {
       let myIframe = document.getElementById("htmlIframe");
-      console.log('myIframe', myIframe, myIframe.contentDocument);
       if (myIframe.contentDocument) {
-        console.log(myIframe.contentDocument.querySelector('.el-main'));
         myIframe.height = myIframe.contentDocument.querySelector('.el-main').clientHeight + 260;
         // myIframe.contentDocument.querySelector('.admin-body-container').style.overflow = 'hidden';
       }