Wie füge ich HTML / CSS / JS in mein iframe-Plugin ein?

Ich habe derzeit ein Iframe-Plugin, das auf einer WordPress-Seite per Shortcode angezeigt wird. Momentan habe ich Webseiten in meinen iframes “src” angezeigt, bin aber kürzlich auf ein Problem gestoßen, um meine eigene html / css / js-Seite anzuzeigen. Hier ist eine funktionierende HTML-Seite für eine Chatbox, die ich in meinen iframe einbinden möchte.

Bildbeschreibung hier eingeben

Die Dateien für die Chatbox sind groß und die HTML-Datei, die die Chatbox anzeigt, verwendet cdn von Google und erwirbt Skript- / Stil-Tags aus anderen Dateien.

Der Code für mein iframe-Plugin

 '' ), $atts ) ); $output = ''; return $output; } add_action( 'wp_enqueue_scripts', 'registerStyle' ); add_action( 'wp_enqueue_scripts', 'registerScript' ); 

Probleme, mit denen ich konfrontiert bin

1) Ich habe versucht, alle Dateien aus der Chatbox in meine Plugin-Datei aufzunehmen und einfach die Seite index.html in der Quelle meines iframes aufzurufen, aber das hat nicht funktioniert.

2) Ich erkenne, dass ein Iframe die gesamte Seite erfassen würde, während ich versuche, den CB nur unten rechts zu greifen.

Was ich tun muss

Ich muss diese Chatbox durch einen iframe auf WordPress greifen. Ich habe alle Dateien für die Chatbox wie erwähnt. Ich hoffe, ich war klar genug. Ich möchte einfach ein Plugin haben, das auf einer WordPress-Site diese Chatbox anzeigt, wenn ich einen Shortcode im WP-Seiteneditor eintippe.

Die index.html-Datei für die Chatbox

   Kaipo             angular.module("app.globals", []).run(["$rootScope", function ($rootScope) { $rootScope.baseUrl = '@Url.Content("~/")'; $rootScope.$safeApply = function ($scope, fn) { fn = fn || function () { }; if ($scope.$$phase) { fn(); } else { $scope.$apply(fn); } }; } ]); angular.module("app.directives", ['ngDialog']); angular.module("app.controllers", ["app.globals"]); angular.module("app", ["app.controllers", "ngAnimate", "app.directives"]);    
  • {{ message.Content }}

  • Login
  • Interests
  • Profile

  • Big Screen
  • Hide

{{ appName }}

loading...
Home
Public
  • {{ message.Content }}

  • {{ interest.Name }}
  • {{ friend.Name }}

Yo!

Solutions Collecting From Web of "Wie füge ich HTML / CSS / JS in mein iframe-Plugin ein?"

Anstatt den iframe aufzurufen, können Sie ein Widget registrieren, das den gesamten HTML-Code enthält. Eine andere Möglichkeit kann die Ausgabe des gesamten HTML-Codes anstelle von iframe sein. “Id” kann auf die gleiche Weise gesteuert werden.
Kombinieren Sie alle CSS-Dateien und JS-Dateien und fügen Sie sie in der gleichen Weise in die Warteschlange ein. Halten Sie den HTML-Code nur zwischen den Körperteilen. Ich bin mir nicht sicher, aber vielleicht hilft dies.