我目前有一个iframe插件，它通过短代码显示在WordPress页面上。目前，我一直在iframes“src”中显示网站，但最近我遇到了一个问题，即显示我自己的html/css/js页面。Here is a functioning html page for a chatbox that I would like to include in my iframe.
聊天室的文件很大，显示聊天室的html文件使用谷歌的cdn，并从其他文件获取脚本/样式标记。
The code for my iframe plugin
<?php
/*
* Plugin Name: Kaipo iframe
* Plugin URI: http://www.kaipochat.com
* Description: Chat By Interest
* Version: 1.0
* Author: JSL
* Author URI: http://www.kaipochat.com
* License: GPL2
*/
function registerStyle(){
wp_register_style( \'custom-style\', plugins_url( \'kaipostyle.css\', __FILE__ ), array(), \'20120208\', \'all\' );
wp_enqueue_style( \'custom-style\' );
}
function registerScript(){
wp_register_script(\'custom-script\', plugins_url(\'jquery.js\',__FILE__ ));
wp_enqueue_script(\'custom-script\');
}
add_shortcode( \'kaipo_iframe\', \'kaipochat_iframe\' );
function kaipochat_iframe($atts) {
extract( shortcode_atts( array(
\'id\' => \'\'
), $atts ) );
$output = \'<iframe id="kaipoid" width="300" height="415"
src="\'. $id .\'"></iframe>\';
return $output;
}
add_action( \'wp_enqueue_scripts\', \'registerStyle\' );
add_action( \'wp_enqueue_scripts\', \'registerScript\' );
Issues I am facing
1） 我尝试将聊天室中的所有文件都包含在插件文件中，并简单地调用页面索引。我的iframe源代码中的html，但这不起作用。
2） 我意识到iframe会抓取整个页面，而我只想抓取右下角的CB。
What I need to do
我需要通过wordpress上的iframe抓取聊天框。我有上面提到的聊天室的所有文件。我希望我已经够清楚了。我只是想有一个插件，在wordpress网站上，在WP页面编辑器上键入一个短代码后，显示这个聊天框。
The index.html file for the Chatbox
<html>
<head>
<title>Kaipo</title>
<link href=\'http://fonts.googleapis.com/css?family=Lato:400,700,700italic,400italic,300\' rel=\'stylesheet\' type=\'text/css\' />
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/screen.css" />
<link rel="stylesheet" href="css/ngDialog.min.css" />
<link rel="stylesheet" href="css/ngDialog-theme-default.min.css" />
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="app/directive/ngDialog.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src=""></script>
<script>
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"]);
</script>
</head>
<body>
<div class="controller" ng-controller="ChatCtrl" ng-app="app" id="ng-app">
<div id="message-box" >
<div class="chat-box">
<div class="chat-area">
<ul class="chat-messages">
<li ng-repeat="message in messageHistory" ng-class="message.Sender">
<p>{{ message.Content }}</p>
</li>
</ul>
</div>
<footer>
<textarea class="enter-message" placeholder="{{chat.message}}" ng-model="$parent.newMessage"></textarea>
<button class="send-message" ng-click="sendMessage()"><span class="fa fa-send"></span></button>
</footer>
</div>
</div>
<div id="kaipo" ng-class="mode">
<div id="pm-box" ng-switch on="pageMode" ng-show="mode === \'expand\'">
<div class="top-menu">
<div class="advance-setting">
<span class="screen-mode fa fa-cog" ng-click="showAdvanceSettings()"></span>
<ul class="advance-setting-dropdown">
<li ng-click="setPage(\'login\')">Login</li>
<li ng-click="setPage(\'interest\')">Interests</li>
<li ng-click="setPage(\'profile\')">Profile</li>
<li><hr /></li>
<li ng-click="showBigBox()">Big Screen</li>
<li ng-click="toggleView()">Hide</li>
</ul>
</div>
</div>
<header>
<h1>{{ appName }}</h1>
<div class="nav">
<div class="nav-item" ng-click="setPage(\'public\')">
<span class="fa fa-group"></span>
<span class="nav-item-label">public</span>
</div>
<div class="nav-item" ng-click="setPage(\'friend\')">
<span class="fa fa-envelope"></span>
<span class="nav-item-label">friends</span>
<div class="notification">2</div>
</div>
<div class="nav-item" ng-click="setPage(\'thumb\')">
<span class="fa fa-shopping-cart"></span>
<span class="nav-item-label">shop</span>
</div>
</div>
</header>
<div class="pages">
<section class="loading" ng-switch-when="loading">
loading...
</section>
<section class="home" ng-switch-when="home">
Home
</section>
<section class="public" ng-switch-when="public">
Public
</section>
<section class="chat" ng-switch-when="chat">
<div class="chat-box">
<div class="chat-area">
<ul class="chat-messages">
<li ng-repeat="message in messageHistory" ng-class="message.Sender">
<p>{{ message.Content }}</p>
</li>
</ul>
</div>
<footer>
<textarea class="enter-message" placeholder="{{chat.message}}" ng-model="$parent.newMessage"></textarea>
<button class="send-message" ng-click="sendMessage()"><span class="fa fa-send"></span></button>
</footer>
</div>
</section>
<section class="login fade" ng-switch-when="login">
<input type="text" id="username" placeholder="username" />
<input type="password" id="password" placeholder="password" />
<button>LOGIN</button>
</section>
<section class="interest fade" ng-switch-when="interest">
<div class="list-mode">
<ul>
<li ng-repeat="interest in privateInterests" ng-click="toggleInterest(interest)" ng-class="(interest.Status ? \'selected\' : \'\')">
<div class="list-item">
<img src="image/doubt.jpg" />
<span>{{ interest.Name }}</span>
<i class="fa fa-check-circle"></i>
</div>
</li>
</ul>
</div>
</section>
<section class="thumb fade" ng-switch-when="thumb">
<div id="grid" class="grid-mode clearfix">
<div class="grid-item" ng-repeat="friend in privateFriends">
<i class="fa fa-fw fa-image"></i>
</div>
</div>
</section>
<section class="friend fade" ng-switch-when="friend">
<div class="list-mode">
<ul class="friend-list">
<li ng-repeat="friend in privateFriends" ng-click="showChat(friend)">
<div class="list-item">
<img src="image/user1.png" />
<span>{{ friend.Name }}</span>
<div ng-class="friend.Status"></div>
</div>
</li>
</ul>
</div>
</section>
</div>
</div>
<button class="toggle-chat-menu" ng-show="mode === \'collapse\'" ng-click="toggleView()">
<span class="fa fa-bars"></span>
<span>Kaipo Mode!</span>
</button>
</div>
<script type="text/ng-template" id="boxScreenDialog">
<h1>Yo!</h1>
<div id="masonry-container">
<div class="item w2"></div>
<div class="item w2 h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item w2 h3"></div>
<div class="item w4"></div>
<div class="item w2"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item w2 h4"></div>
<div class="item w4"></div>
<div class="item w2 h5"></div>
<div class="item w4"></div>
<div class="item w2"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item w2 h3"></div>
<div class="item w4"></div>
<div class="item w2"></div>
</div>
</script>
</div>
<script src="app/service/chat.js"></script>
<script src="app/service/utility.js"></script>
<script src="app/controller/chat.js"></script>
</body>
</html>
