feat: inject script to iframe

Postcatlab · May 10, 2022 · 95fe500 · 95fe500
1 parent 55d78ca
commit 95fe500
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 23 deletions.
diff --git a/src/core/market/browser/src/main.js b/src/core/market/browser/src/main.js
@@ -5,5 +5,4 @@ import App from './App.vue';
 import router from './router.js';
 import 'windi.css';
 import { createPinia } from 'pinia';
-window.eo=window.parent.eo;
 createApp(App).use(router).use(Antd).use(createPinia()).mount('#app');
diff --git a/src/workbench/browser/src/app/pages/api/group/edit/api-group-edit.component.ts b/src/workbench/browser/src/app/pages/api/group/edit/api-group-edit.component.ts
@@ -67,7 +67,7 @@ export class ApiGroupEditComponent implements OnInit {
         this.modalRef.destroy();
         this.messageService.send({ type: 'updateGroupSuccess', data: { group: result.data } });
       } else {
-        console.log(result.data);
+        console.error(result.data);
       }
     });
   }
@@ -78,7 +78,7 @@ export class ApiGroupEditComponent implements OnInit {
         this.modalRef.destroy();
         this.messageService.send({ type: 'updateGroupSuccess', data: { group: result.data } });
       } else {
-        console.log(result.data);
+        console.error(result.data);
       }
     });
   }

diff --git a/src/workbench/browser/src/app/pages/api/test/history/api-test-history.component.ts b/src/workbench/browser/src/app/pages/api/test/history/api-test-history.component.ts
@@ -136,7 +136,6 @@ export class ApiTestHistoryComponent implements OnInit {
   private getList() {
     this.storage.run('apiTestHistoryLoadAllByApiDataID', [this.apiID], (result: StorageHandleResult) => {
       if (result.status === StorageHandleStatus.success) {
-        console.log(result.data)
         result.data.forEach((val: any) => {
           this.parseItem(val);
         });

diff --git a/src/workbench/browser/src/app/pages/pages.component.html b/src/workbench/browser/src/app/pages/pages.component.html
@@ -2,15 +2,15 @@
 <div class="home_container f_row">
   <eo-sidebar></eo-sidebar>
   <div class="home fg1">
+    <router-outlet *ngIf="!loadedIframe"></router-outlet>
     <iframe
-      *ngIf="!this.sidebar.currentModule.isOffical"
-      src="http://localhost:8080"
-      id="app"
-      frameborder="no"
-      border="0"
-      style="width: calc(100vw - 90px);height: calc(100vh - var(--NAVBAR_HEIGHT) - 4px);"
-    ></iframe>
-    <router-outlet *ngIf="this.sidebar.currentModule.isOffical"></router-outlet>
+    *ngIf="!this.sidebar.currentModule.isOffical"
+    src="http://localhost:8080"
+    id="app_iframe"
+    frameborder="no"
+    border="0"
+    style="width: calc(100vw - 90px);height: calc(100vh - var(--NAVBAR_HEIGHT) - 4px);"
+  ></iframe>
   </div>
 </div>
 <eo-toolbar></eo-toolbar>
diff --git a/src/workbench/browser/src/app/pages/pages.component.ts b/src/workbench/browser/src/app/pages/pages.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { SidebarService } from '../shared/components/sidebar/sidebar.service';
 
 @Component({
@@ -7,13 +7,30 @@ import { SidebarService } from '../shared/components/sidebar/sidebar.service';
   styleUrls: ['./pages.component.scss'],
 })
 export class PagesComponent implements OnInit {
-  constructor(private sidebar: SidebarService) {}
+  loadedIframe = false;
+  constructor(private cdRef: ChangeDetectorRef, private sidebar: SidebarService) {}
   ngOnInit(): void {
     this.watchSidebarItemChange();
   }
   private watchSidebarItemChange() {
     this.sidebar.appChanged$.pipe().subscribe(() => {
-      console.log(this.sidebar.currentModule);
+      this.loadedIframe = false;
+      if (!this.sidebar.currentModule.isOffical) {
+        //add loading
+        setTimeout(() => {
+          let iframe = document.getElementById('app_iframe') as HTMLIFrameElement;
+          //add auto script
+          let iframeDocument = iframe.contentWindow.document;
+          var el = iframeDocument.createElement('script');
+          el.text = `window.eo=window.parent.eo;\n`;
+          iframeDocument.body.appendChild(el);
+          //loading finish
+          iframe.onload = () => {
+            this.loadedIframe = true;
+            this.cdRef.detectChanges(); // solution
+          };
+        }, 0);
+      }
     });
   }
 }
diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html
@@ -5,7 +5,6 @@
     class="sidebar_item"
     nz-tooltip
     [nzTooltipTitle]="item.moduleName"
-    [routerLink]="item.route ? item.route : '/home/blank'"
     [ngClass]="{ sidebar_item_active: item.moduleID === this.sidebar.currentModule.moduleID }"
   >
     <span *ngIf="item.logo.includes('icon-')" class="iconfont fs28" [ngClass]="item.logo"></span>

diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts
@@ -41,13 +41,8 @@ export class SidebarComponent implements OnInit, OnDestroy {
     this.sidebar.currentModule = module;
     this.sidebar.appChanged$.next();
     let nextApp = this.modules.find((val) => val.moduleID === module.moduleID);
-    let route = (nextApp as SidebarModuleInfo).route;
-    if (route) {
-      this.router.navigate([route]);
-    }
-    // if (this.electron.isElectron) {
-    //   window.eo.openApp({ moduleID: module.moduleID });
-    // }
+    let route = (nextApp as SidebarModuleInfo).route || '/home/blank';
+    this.router.navigate([route]);
   }
   ngOnDestroy(): void {
     this.destroy = true;
@@ -88,6 +83,11 @@ export class SidebarComponent implements OnInit, OnDestroy {
     if (!currentModule) {
       //route error
       this.clickModule(this.modules[0]);
+      // let route = (nextApp as SidebarModuleInfo).route;
+      // console.log(route)
+      // if (route) {
+      //   this.router.navigate([route]);
+      // }
       return;
     }
     this.sidebar.currentModule = currentModule;