fully working

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { MainScreenNoTouchComponent } from './main-screen/no-touch/main-screen-n
 import { JobService } from './job.service';
 import { FilamentComponent } from './filament/filament.component';
 import { FilesComponent } from './files/files.component';
+import { URLSafePipe } from './url.pipe';
 
 
 @NgModule({
@@ -47,7 +48,8 @@ import { FilesComponent } from './files/files.component';
     MainScreenComponent,
     MainScreenNoTouchComponent,
     FilamentComponent,
-    FilesComponent
+    FilesComponent,
+    URLSafePipe
   ],
   imports: [
     BrowserModule,

src/app/control/control.component.html

@@ -1,3 +1,10 @@
+<div class="i-frame" id="iFrame">
+    loading website ...
+    <iframe class="i-frame__content" [src]="iFrameURL | url" onload="this.style.opacity=1;">That shouldn't happen
+        ...</iframe>
+    <img src="assets/error.svg" class="i-frame__close" (click)="hideIFrame()">
+</div>
+
 <table class="top-bar">
     <tr>
         <td class="top-bar__back" routerLink="/main-screen">

src/app/control/control.component.scss

@@ -1,3 +1,39 @@
+.i-frame {
+    display: none;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0;
+    right: 0;
+    z-index: 50;
+    transition: opacity ease-in-out .5s;
+    opacity: 0;
+    background: #2a2f39;
+    font-weight: 500;
+    font-size: 5vw;
+    text-align: center;
+    padding-top: 24vh;
+
+    &__content {
+        border: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        position: fixed;
+        top: 0;
+        left: 0;
+        opacity: 0;
+    }
+
+    &__close {
+        width: 5vw;
+        position: fixed;
+        top: 3vh;
+        right: 3.5vw;
+        z-index: 51;
+    }
+}
+
 .control {
     margin-top: 5vh;
     display: block;

src/app/control/control.component.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, SecurityContext } from '@angular/core';
 import { PrinterService } from '../printer.service';
 import { ConfigService } from '../config/config.service';
 import { OctoprintService } from '../octoprint.service';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-control',
@@ -12,8 +13,13 @@ export class ControlComponent {
   jogDistance = 10;
   customActions = [];
   showHelp = false;
+  iFrameURL: SafeResourceUrl = 'about:blank';
 
-  constructor(private printerService: PrinterService, private octoprintService: OctoprintService, private configService: ConfigService) {
+  constructor(
+    private printerService: PrinterService,
+    private octoprintService: OctoprintService,
+    private configService: ConfigService,
+    private domSanitizer: DomSanitizer) {
     this.customActions = this.configService.getCustomActions();
   }
 
@@ -39,7 +45,11 @@ export class ControlComponent {
       case '[!SHUTDOWN]': this.shutdownPi(); break;
       case '[!KILL]': this.kill(); break;
       default: {
-        this.printerService.executeGCode(command);
+        if (command.includes('[!WEB]')) {
+          this.openIFrame(command.replace('[!WEB]', ''));
+        } else {
+          this.printerService.executeGCode(command);
+        }
         break;
       }
     }
@@ -75,4 +85,23 @@ export class ControlComponent {
     this.shutdownPi();
     setTimeout(this.stopOctoDash, 500);
   }
+
+  // [!WEB]
+  openIFrame(url: string) {
+    this.iFrameURL = url;
+    const iFrameDOM = document.getElementById('iFrame');
+    iFrameDOM.style.display = 'block';
+    setTimeout(() => {
+      iFrameDOM.style.opacity = '1';
+    }, 50);
+  }
+
+  hideIFrame() {
+    const iFrameDOM = document.getElementById('iFrame');
+    iFrameDOM.style.opacity = '0';
+    setTimeout(() => {
+      iFrameDOM.style.display = 'none';
+      this.iFrameURL = 'about:blank';
+    }, 500);
+  }
 }

src/app/url.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'url' })
+export class URLSafePipe implements PipeTransform {
+    constructor(private sanitizer: DomSanitizer) { }
+    transform(url) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+}