Open local link from webpage - javascript

I have a page in my PhoneGap webapp (file:///mypath/), that opens a webpage (http://www.example.com/) in my server. In this webpage I need to return after I do all my stuff in my webapp.
This is my webpage source:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" type="text/css" href="css/stile.css">
<meta name="viewport" content="width=320, initial-scale=0.7, user-scalable=no">
<script src="JS/jquery-1.11.1.js.js"></script> <!--PER EVENTI-->
<script src="JS/func.js"></script> <!--PER EVENTI-->
<title>BParty</title>
</head>
<body style="background-color:#e20a7e; overflow:none;">
<img src="IMG/CIAMBELLA_03.png" class="icons5" style="display:block; margin: 0 auto;">
<br>
<br>
<div align="center" style="color:#FFF;">
<table align="center" width="100%">
<tr>
<font style="font-size:5em;">OOPS!</font><br>
</tr>
<tr>
<font style="font-size:2.5em;">Sembra che tu non sia connesso</font><br>
</tr>
<tr>
<font style="font-size:1.5em;">A breve sarai reindirizzato</font>
</tr>
<br>
<tr>
<font style="font-size:1em;">Se non vuoi aspettare clicca
QUI</font>
</tr>
</table>
</div>
<?
header( "refresh:5;url=$location" ); ?>
</body>
</html>
This is my localpage:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<script type="text/javascript">
var ourLocation = document.URL;
</script>
</head>
<body>
<script>
var goto = "<a href='http://www.bestparty.altervista.org/MIRKO/pag2.php?location=" + ourLocation + "'>dicjdb</a>";
document.write(goto);
</script>
</body>
</html>
EDIT
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" type="text/css" href="css/stile.css">
<meta name="viewport" content="width=320, initial-scale=0.7, user-scalable=no">
<script src="JS/jquery-1.11.1.js.js"></script> <!--PER EVENTI-->
<script src="JS/func.js"></script> <!--PER EVENTI-->
<title>BParty</title>
</head>
<body style="background-color:#e20a7e; overflow:none;">
<div id="navigation" style="overflow:none;">
<table width="100%">
<tr valign="bottom">
<td valign="middle" width="25%" align="center">
</td>
<td valign="bottom" width="50%" align="center">
<img src="IMG/LOGO-WHITE.png" class="logonbar" alt="DONUT"/>
</td>
<td width="25%" align="center" valign="middle">
</td>
</tr>
</table>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<img src="IMG/CIAMBELLA_03.png" class="icons5" style="display:block; margin: 0 auto;">
<br>
<br>
<div align="center" style="color:#FFF;">
<table align="center" width="100%">
<tr>
<font style="font-size:5em;">OOPS!</font><br>
</tr>
<tr>
<font style="font-size:2.5em;">Sembra che tu non sia connesso</font><br>
</tr>
<tr>
<font style="font-size:1.5em;">A breve sarai reindirizzato</font>
</tr>
<br>
<tr>
<font style="font-size:1em;">Se non vuoi aspettare clicca
QUI</font>
</tr>
</table>
</div>
<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
<script>
variable = getUrlVars()["location"];
alert(variable);
//window.location.href = variable;
</script>
</body>
</html>
I added the js script to return at the local page on my app but it doesn't work, it stays on my php page on my server, same result by clicking the a href that contains the php


I agree with Shaun Loftin.
Anyway, you can embed a local webpage using a simple IFRAME.
<iframe src="http://localhost/local_webpage.php"></iframe>

Related

How to add button google search in this form?

Hi there can someone help me, I want every keyword list, there is a google search button, and when I click on it, it will open a new browser tab, can anyone help me, I don't understand coding at all, so I ask for help here, I'm attaching a screenshot, thank you
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>TRENDING</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- <style type="text/css"> -->
<!-- h3 span { -->
<!-- font-size: 22px; -->
<!-- margin-left: auto; -->
<!-- } -->
<!-- h3 input.search-input { -->
<!-- width: 100px; -->
<!-- margin-left: auto; -->
<!-- float: right -->
<!-- } -->
<!-- .mt32 { -->
<!-- margin-top: 32px; -->
<!-- } -->
<!-- </style> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body class="mt32">
<!-- <div class="container"> -->
<!-- <h3> -->
<!-- <span>RESULT</span> -->
<!-- </h3> -->
<!-- </div> -->
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>horse</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
</tbody></table>
</body>
</html>

Here is an example -
note I cannot use the drawCallback but need to use on("draw" PLUS a draw() to make sure the buttons are also added on the next page of the pagination
drawCallback is called for EACH row, so this code is not useful
$table = $('table').DataTable({"drawCallback": addButtons})
The opening of the window is blocked here at SO but works in the
jsfiddle
const addButtons = settings => {
$('#dt1 tr td:nth-child(1)').html(function() {
return `<button type="button" title="google search" class="py-0 btn btn-dark btn-sm search">${this.innerText}</button>`
})
$('#dt1 tr td:nth-child(4)').html(function() {
return `<button type="button" title="google trends" class="py-0 btn btn-secondary btn-sm trends">${this.innerText}</button>`
})
};
$(document).ready(function() {
$table = $('table').DataTable();
$table.on("draw", addButtons)
$table.rows().invalidate().draw(); // not sure WHY I need to do this to have the FIRST draw trigger
$table.on("click", ".search", function() {
window.open(`https://google.com/search?q=${this.innerText}`, '_blank');
})
$('tbody').on("click", ".trends", function() {
window.open(`https://trends.google.com/trends/explore?date=now 7-d&geo=US&q=${this.innerText}`, '_blank');
})
});
.search, .trends {
width: 70%;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>BACKUP</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script>
</script>
</head>
<table id="dt1" class="table table-striped mt32 customers-list">
<thead><tr><th title="Field #1">Keyword</th>
<th title="Field #2">Products</th>
<th title="Field #3">Date</th>
<th title="Field #4">Google Trends</th>
</tr></thead>
<tbody><tr>
<td>golf just play it</td>
<td align="right">302</td>
<td align="right">1642887886267</td>
<td>golf just play it</td>
</tr>
<tr>
<td>go little rockstar tiktok</td>
<td align="right">980</td>
<td align="right">1642888240211</td>
<td>go little rockstar tiktok</td>
</tr>
<tr>
<td>gorila</td>
<td align="right">709</td>
<td align="right">1642888326752</td>
<td>gorila</td>
</tr>
<tr>
<td>google arts and culture</td>
<td align="right">23</td>
<td align="right">1642888331842</td>
<td>google arts and culture</td>
</tr>
<tr>
<td>goat case</td>
<td align="right">1099</td>
<td align="right">1642888338561</td>
<td>goat case</td>
</tr>
<tr>
<td>goth youtuber</td>
<td align="right">334</td>
<td align="right">1642888346327</td>
<td>goth youtuber</td>
</tr>
<tr>
<td>goots</td>
<td align="right">56</td>
<td align="right">1642888351273</td>
<td>goots</td>
</tr>
<tr>
<td>godlike</td>
<td align="right">360</td>
<td align="right">1642888743165</td>
<td>godlike</td>
</tr>
<tr>
<td>very good very nice</td>
<td align="right">3257</td>
<td align="right">1642889189771</td>
<td>very good very nice</td>
</tr>
<tr>
<td>navy blue and gold</td>
<td align="right">2613</td>
<td align="right">1642889973714</td>
<td>navy blue and gold</td>
</tr>
<tr>
<td>its a good day to read a book bookworm book dragon</td>
<td align="right">66</td>
<td align="right">1642889988276</td>
<td>its a good day to read a book bookworm book dragon</td>
</tr>
<tr>
<td>peach and goma teddy</td>
<td align="right">918</td>
<td align="right">1642889994665</td>
<td>peach and goma teddy</td>
</tr>
<tr>
<td>i paused the golden girls to be here</td>
<td align="right">91</td>
<td align="right">1642890006415</td>
<td>i paused the golden girls to be here</td>
</tr>
</tbody></table>
</html>

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>TRENDING</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- <style type="text/css"> -->
<!-- h3 span { -->
<!-- font-size: 22px; -->
<!-- margin-left: auto; -->
<!-- } -->
<!-- h3 input.search-input { -->
<!-- width: 100px; -->
<!-- margin-left: auto; -->
<!-- float: right -->
<!-- } -->
<!-- .mt32 { -->
<!-- margin-top: 32px; -->
<!-- } -->
<!-- </style> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body class="mt32">
<!-- <div class="container"> -->
<!-- <h3> -->
<!-- <span>RESULT</span> -->
<!-- </h3> -->
<!-- </div> -->
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator <a target="_blank" style="font-size:70%" class="py-0 btn btn-primary btn-sm" href="//www.google.com/search?q=smooth operator">Google search</a></td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>horse <a target="_blank" style="font-size:70%" class="py-0 btn btn-primary btn-sm" href="//www.google.com/search?q=horse" >Google search</a></td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
</tbody></table>
</body>
</html>

print the value of a variable from javascript to html

How can print the value of variable count in ministries().For example i have 54 object.so it will show ministries(54).How can i print 54(value of count) in ministries.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Data Retrieve</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
#p1 {background-color: violet;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<table id="info_table" class="table">
<tr>
<td><p align="center"><b>Ministry</b></p></td>
</tr>
<tr id="p1">
<td><p align="center"><b>Total ministries()</b></p></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
$.getJSON("http://localhost/directory/ministri.json",function(obj){
var info ='';
//alert(obj.data.length);
var count = obj.data.length;
$.each(obj.data,function(key,value){
info += '<tr>';
info +='<td>'+value.sitename_bn+'<span style="float: right"> > </span>'+ '</td>';
info += '</tr>';
});
$('#info_table').append(info);
});
</script>

It's really simple. Just target your element #p1 and replace its HTML with the value you got.
$('#p1 td').html("<p><b>Total ministries(" + count + ")</b></p>");

Change your table structure to
<table id="info_table" class="table">
<thead>
<tr>
<td><p align="center"><b>Ministry</b></p></td>
</tr>
<tr id="p1">
<td><p align="center"><b>Total ministries()</b></p></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
and then change jQuery code to
$('#info_table > tbody').append(info);

Html table to pdf tutorial doesn't work

I'm following this tutorial to save my html table to pdf. I tried it first with my own table (who is created by ajax - database). didn't work.. Then I tried to do it with the table in the tutorial but that even didn't work..
tutorial: http://ngiriraj.com/pages/htmltable_export/demo.php
my code..
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script type="text/javascript" src="javascript/tableExport.js"></script>
<script type="text/javascript" src="javascript/jquery.base64.js"></script>
<script type="text/javascript" src="jspdf/libs/sprintf.js"></script>
<script type="text/javascript" src="jspdf/jspdf.js"></script>
<script type="text/javascript" src="jspdf/libs/base64.js"></script>
<title>Melkerhei</title>
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="bootstrap/bootstrap.css">
<!-- Custom styles for this template -->
<link href="bootstrap/jumbotron.css" rel="stylesheet">
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
</head>
<html lang="en">
<div id="header"></div>
<div id="adminLvl" style="display: none;">true</div>
<body onload="var k1=window.setTimeout('getCurrentUser(\'get\');', 0); var k7=window.setTimeout('orderAdmin(\'overview\', \'-1\');', 500);">
<div id=navbar></div>
<div class="container">
<div>
<h1 style="padding-bottom: 20px;">Bestellingen</h1>
<table id="customers" class="table table-striped" >
<thead>
<tr class='warning'>
<th>Country</th>
<th>Population</th>
<th>Date</th>
<th>%ge</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chinna</td>
<td>1,363,480,000</td>
<td>March 24, 2014</td>
<td>19.1</td>
</tr>
<tr>
<td>India</td>
<td>1,241,900,000</td>
<td>March 24, 2014</td>
<td>17.4</td>
</tr>
<tr>
<td>United States</td>
<td>317,746,000</td>
<td>March 24, 2014</td>
<td>4.44</td>
</tr>
<tr>
<td>Indonesia</td>
<td>249,866,000</td>
<td>July 1, 2013</td>
<td>3.49</td>
</tr>
<tr>
<td>Brazil</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
</tbody>
</table>
</div>
<button onClick ="$('#customers').tableExport({type:'pdf',escape:'false'});">topdf</button>
<div id="footer" style="clear:both;"></div>
</div>
<!-- Bootstrap core JavaScript ================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="javascript/user.js"></script>
<script src="javascript/logout.js"></script>
<script src="javascript/orderAdmin.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#navbar").load("navbaradmin.html");
$("#footer").load("footer.html");
});
</script>
<script type="text/javascript">
function setName() {
var user = document.getElementById("currentUser");
document.getElementById("userLabel").value = user.childNodes[0].textContent;
}
</script>
</body>
</html>

how to auto restart modem by running script

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TL-WR841N</title>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="wed, 26 Feb 1997 08:21:57 GMT">
<link href="/dynaform/css_main.css" rel="stylesheet" type="text/css">
<script language="javascript" src="/dynaform/common.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript"><!--
if(window.parent == window){window.location.href="http://192.168.1.1";}
function Click(){ return false;}
document.oncontextmenu=Click;
//--></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"><!--//
function doSubmit()
{
if(confirm(js_to_reboot="Are you sure to reboot this device?"))
{
location.href = "/userRpm/SysRebootRpm.htm";
return true;
}
else
{
return false;
}
}
//--></script>
</head>
<body onload="setTagStr(document,'ntw_sys_reboot');LoadHelp('SysRebootHelpRpm.htm'); resize(this);" onresize="resize(this);" marginwidth="0" marginheight="0">
<center>
<form action="SysRebootRpm.htm" enctype="multipart/form-data" method="get" onsubmit="return doSubmit();">
<table id="autoWidth" style="width: 950px;">
<tbody>
<tr>
<td class="h1" id="t_title">Reboot</td>
</tr>
<tr>
<td class="blue"></td>
</tr>
<tr>
<td class="info" id="t_notice">Click this button to reboot this device.</td>
</tr>
<tr>
<td class="mbtn"><input name="Reboot" type="submit" class="buttonBig" value="Reboot" id="reboot"></td>
</tr>
<tr>
<td class="blue"></td>
</tr>
</tbody>
</table>
</form>
</center>
<meta http-equiv="pragma" content="no-cache">
</body></html>
Above is from the modem page.
Is there is a way to extract the javascript to make reboot modem as easy as one-click.
Does anyone have any idea?

Change iFrame Source from separate iFrame with same parent?

Here's my full, latest code that doesn't work. Here's the main window HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body background="core_rec/web_res/cf2.jpg">
<center>
<table width="720" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="180"><img src="core_rec/logos/metaltop.png" /></td>
<td colspan="3"><img src="core_rec/web_res/title.png" align="bottom"/></td>
</tr>
<tr>
<td width="180"><img src="core_rec/logos/metalbottom.png" /></td>
<td width="70"><center><font id="menutext">Menu</font></center></td>
<td width="100"><center><font id="menutext">Info</font></center></td>
<td width="200"><center><font id="menutext">Products/Services</font></center></td>
<td width="170"><center><font id="menutext">Contact</font></center></td>
</tr>
</table>
<br /><br />
<table height="80%" width="720">
<tr>
<td width="140"><iframe src="iframes/menus/main.html" width="140" id="sidebar"></iframe></td>
<td width="540"><iframe src="iframes/bodies/main/main.html" width="540" name="bodyframe" id="bodyframe"></iframe></td>
</tr>
</table>
</center>
</html>
Here's the menus/main.html. It contains the button.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iFrame Main</title>
<link rel="stylesheet" type="text/css" href="../../css/main.css" />
</script>
</head>
<body bgcolor="#000000">
<center>
<font id="sidebartext">
Main<br /><br />
Other Feeds<br /><br />
<button onclick="parent.document.getElementById('bodyframe').src='../bodies/main/othersites.html'">Other Sites</button><br /><br />
</font>
</center>
</body>
</html>
Whenever I push the button on the menu frame, the body frame doesn't change.

Make sure to run this on a simple server and test. Many browsers have restrictions when it comes to iframes.
Many files don't work properly if using file:// protocol, which will be used if you directly open the html file (i.e.: Not through a server).

You misspelled getElementById: last letter d should not be uppercase.
Instead of window.document.getElementById you could write document.getElementById, because window is the global object in browser javascript (at least, global per window/(i)frame)
http://jsfiddle.net/kNrVL/

Categories

Resources