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:
* Description: Chat By Interest
* Version: 1.0
* Author: JSL
* Author URI:
* 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=':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>
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
* Description: Chat By Interest
* Version: 1.0
* Author: JSL
* Author URI: http://www.kaipochat
* 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/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>
- Can you post the HTML code of only the chat box here?You can not grab only the box through iframe unless that is the only thing in your html page. – Webimetry Solutions Commented Apr 28, 2015 at 12:04
- Sure, the html page only contains the chatbox. I will post the html code. – LinDan ChongWei Commented Apr 28, 2015 at 12:08
1 Answer
Reset to default 1Instead of calling the iframe , You can register a widget that will contain all the HTML code.Another way can be outputting the whole HTML code instead of iframe."id" can be controlled in the same manner.
Combine all CSS files and JS files and then enqueue them in the same manner.Keep HTML code only between the body part.I am not sure but may be this helps.