I currently have an iframe plugin that displays on a WordPress page by shortcode. Currently I have been displaying websites in my iframes "src" but I recently came across an issue to display my very own html/css/js page. Here is a functioning html page for a chatbox that I would like to include in my iframe.
The files for the chatbox are big and the html file that displays the chatbox uses cdn from google, and acquires script/style tags from other files.
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) I tried including all the files from the chatbox in my plugin file and simply call the page index.html in my iframe's source but that did not work.
2) I realize an iframe would grab the entire page while I am trying to grab the CB only on the bottom right.
What I need to do
I need to grab that chatbox through an iframe on wordpress. I have all the files for the chatbox as mentioned. I hope I was clear enough. I simply want to have a plugin that displays on a wordpress site this chatbox upon typing a shortcode on the WP page editor.
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>
