Site icon NgDeveloper

How to access the websense blocked web pages ?

Mirthbees

How to access the websense blocked web pages ?

In all the organization’s many web pages are blocked by websense. But we really need a content sometime from the blocked pages [like blogger, wordpress, joomla web pages etc.,]. In order to access the blocked web page contents, Javadomain released Unblock Access API services.

Now we are going to see how we are accessing the blocked web pages.

Requirements:

TheQueue API [To get the rss feed of the URL/Page]
FeedEx jQuery Plugin [To display the RSS Feed Response, TheQueue API response in our case]

TheQueue.org API Sample Request:
http://api.thequeue.org/v1/clear?url=http://www.ngdeveloper.com/freecharge-paytm-style-mobile-number-auto-operator-loading/
Html Responsive Search Text Code:
<div class="search">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-section">
<div class="row">

<div class="col-md-10">
<div class="form-group">
<label class="sr-only" for="URL">URL</label>
<input type="text" class="form-control" id="URL" placeholder="Enter the URL [http://www.ngdeveloper.com/how-to-create-a-mobile-recharge-website/]" >
</div>
</div>

<div class="col-md-2">
<button type="button" class="btn btn-default btn-primary" onclick="loadRSS();">Search</button>
</div>
<div style="color:white;font-weight:bold;" class="col-md-12"> Eg:http://www.ngdeveloper.com/how-to-create-a-mobile-recharge-website/ </div>
</div>
</div>
</div>
</div>
</div>
</div>
Javascript source code [FeedEx jQuery Plugin Source code]:
// Function called when search button clicked and enter key pressed
function loadRSS(){
URL = $('#URL').val();
$('#divRss').FeedEk({
FeedUrl: 'http://api.thequeue.org/v1/clear?url='+URL,
MaxCount: 2
})
}
jquery enter key event in textbox:
$(document).ready(function(){
$('#URL').on('keypress', function (event) {
if(event.which === 13){
loadRSS();
}
});
})
CSS:
<style type="text/css">
@media (max-width: 480px) {
body {
padding-bottom: 40px;
}

.carousel {
height: 200px !important;
margin-bottom: 60px;
}
.carousel .item {
height: 200px !important;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 200px !important;
}
.search {
margin-top: -25%;
}
.search .form-section{
background:rgba(0,0,0,0.6);
border: 2px solid #414141;
border-radius: 5px;
padding: 10px;
}

}

body {
padding-bottom: 40px;
}

.carousel {
height: 400px;
margin-bottom: 60px;
}
.carousel .item {
height: 400px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 400px;
}
.search {
margin-top: -25%;
}
.search .form-section{
background:rgba(0,0,0,0.6);
border: 2px solid #414141;
border-radius: 5px;
padding: 10px;
}
.feedEkList{
width:100% !important;
}

</style>
 
Html Response Source Code: [Displying RSS Feed Response]
<div class="container" style="margin-top:50px;">
	<!-- Reponsive -->
	<div class="row">
		<div class="span6" id="divRss"></div>
	</div>
</div>

We have made it responsive[desktop,tablet,phones views] to make it more user friendly.

Sample Output:

Feel free to post your comments/suggestions/feedbacks in the below comment section….

Exit mobile version