Change iFrame Source from separate iFrame with same parent? - javascript

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/

Related

Remove HTML code block from response using Javascript

I want to remove HTML code Block and CSS block from below code and get only XML code from above HTML code block. I want remove this HTML code block and want simple XML format code.
<FUSION-REPORT-FILE>
<REPORT-FILE>
<HEADER>
<DATE-OF-REQUEST>22-02-2021</DATE-OF-REQUEST>
<PREPARED-FOR>INS0000001</PREPARED-FOR>
<PREPARED-FOR-ID>ABCD</PREPARED-FOR-ID>
<DATE-OF-ISSUE>22-02-2021</DATE-OF-ISSUE>
<REPORT-ID>xxyzD8989</REPORT-ID>
</HEADER>
<REQUEST>
<NAME>ABX. XYZ</NAME>
<DOB-DATE>1991-01-01</DOB-DATE>
<PAN>PQR789895</PAN>
<PHONE>9819941920</PHONE>
<BRANCH-ID>59</BRANCH-ID>
</REQUEST>
</FUSION-REPORT-FILE>
<!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=iso-8859-1" />
<title>Fusion Report</title>
<table>
<td width="150"></td>
<td align="left" width="300" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" class="reportHead">FUSION REPORT
<br>
</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</html>
I want a response as like below without HTML Code block; want remove this HTML code block and want simple XML format code as like below.
<FUSION-REPORT-FILE>
<REPORT-FILE>
<HEADER>
<DATE-OF-REQUEST>22-02-2021</DATE-OF-REQUEST>
<PREPARED-FOR>INS0000001</PREPARED-FOR>
<PREPARED-FOR-ID>ABCD</PREPARED-FOR-ID>
<DATE-OF-ISSUE>22-02-2021</DATE-OF-ISSUE>
<REPORT-ID>xxyzD8989</REPORT-ID>
</HEADER>
<REQUEST>
<NAME>ABX XYZ</NAME>
<DOB-DATE>1991-01-01</DOB-DATE>
<PAN>PQR789895</PAN>
<PHONE>9819941920</PHONE>
<BRANCH-ID>59</BRANCH-ID>
</REQUEST>
</FUSION-REPORT-FILE>
if you konw the root tag of xml, you can use slice function in javascript to get part of the string.
var str = `<FUSION-REPORT-FILE>
<REPORT-FILE>
<HEADER>
<DATE-OF-REQUEST>22-02-2021</DATE-OF-REQUEST>
<PREPARED-FOR>INS0000001</PREPARED-FOR>
<PREPARED-FOR-ID>ABCD</PREPARED-FOR-ID>
<DATE-OF-ISSUE>22-02-2021</DATE-OF-ISSUE>
<REPORT-ID>xxyzD8989</REPORT-ID>
</HEADER>
<REQUEST>
<NAME>ABX. XYZ</NAME>
<DOB-DATE>1991-01-01</DOB-DATE>
<PAN>PQR789895</PAN>
<PHONE>9819941920</PHONE>
<BRANCH-ID>59</BRANCH-ID>
</REQUEST>
</FUSION-REPORT-FILE>
<!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=iso-8859-1" />
<title>Fusion Report</title>
<table>
<td width="150"></td>
<td align="left" width="300" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" class="reportHead">FUSION REPORT
<br>
</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</html>`
var resultXml = str.slice(str.indexOf("<FUSION-REPORT-FILE>"),(str.indexOf("</FUSION-REPORT-FILE>")+21));
console.log(resultXml);

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?

Open local link from webpage

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>

HTML and JavaScript

Problem in Firefox, but ok with Internet Explorer.
I tried a lot but not solve yet. Please help me.
Actually the problem over here is that, it is not in formatte order in firefox. but is displaying on in internet explorer.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
<!-- /* below javascript function is to handle the "Enter" key form submission */ -->
<script language="javascript">
</script>
<script type="text/javascript">
function change1(){
document.getElementById('id1').style.display='block'
document.getElementById('id2').style.display='none'
document.getElementById('id3').style.display='block'
document.getElementById('id4').style.display='none'
document.getElementById('body1').style.display='block'
document.getElementById('body2').style.display='none'
document.home_page.reg_id.focus();
}
function change2(){
document.getElementById('id1').style.display='none'
document.getElementById('id2').style.display='block'
document.getElementById('id3').style.display='none'
document.getElementById('id4').style.display='block'
document.getElementById('body1').style.display='none'
document.getElementById('body2').style.display='block'
document.home_page.uname.focus();
}
</script>
<!-- end of "enter" key handling functions. -->
</head>
<form method="POST" action="home_page.php" name="home_page">
<table width="320" height="200" border="1">
<tr style="width:315px;" align="center">
<td align="center" style="background-repeat:no-repeat;" bgcolor="#000099" width="155" height="28" id="id1" onClick="change1()"></td>
<td align="center" bgcolor="#009900" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id2" onClick="change1()"></td>
<td align="center" style="background-repeat:no-repeat;" bgcolor="#009900" width="155" height="28" id="id3" onClick="change2()"></td>
<td align="center" bgcolor="#000099" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id4" onClick="change2()"></td>
</tr>
<tr>
<td colspan="2" id="body1">
<table width="318" height="44" border="0">
<tr>
<td width="318" height="40" align="center">
<span class="loginstyle3">Registration Status</span>
</td>
</tr>
</table></td>
<td colspan="2" id="body2" style="display:none;">
<table width="318" height="45" border="0">
<tr>
<td width="107" height="41" align="center" background="images/glossy1grey.gif">
<span class="loginstyle3">Login Entry </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- below block of code is to set login page after login attempt and failed -->
<script type="text/javascript">change2()</script>
</form>
</body>
</html>
I don't think that setting table cells (<td> elements) to be "display: block" is going to work out well in Firefox. Table cells have their own "display" type, and if you make them "display: block" the browser is going to do what you ask. Note that "display: block" is not simply the opposite of "display: none".
Try using "display: table-cell" instead of "block".
edit — I've tried this and it's definitely what the problem is.
Your problem in FF
document.home_page.uname is undefined
Line 27
The problems you have are
your TD is inheriting the height=200 from the TABLE
your TD has display: block which forces it onto a new line
Why are you using tables for this? They add a lot of extra, unnecessary tags. Have a read up on CSS, it's the future (and the present..)!
The most obvious thing to me is that you use self closing <LINK> and <META> tags in what is probably not a XHTML file. Those are meant to be left open. Try
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" >
instead.
IIRC Firefox does not read the link to your css file if the tag is self closing, because it is presumed empty.

Help With JavaScript Alert

function msg ($msg) {
echo "<script type='text/javascript'>alert('$msg');</script>";
}
if (count($_POST)) {
msg('TEST!!!!!');
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My website</title>
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
</head>
<body>
<div id="content">
<form action="/user/register" method="post">
<table cellspacing="2" cellpadding="0">
<tr>
<td>Username:</td>
<td><input name="username" maxlength="25" size="25" type="text" />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td><input name="email" maxlength="255" size="25" type="text" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input name="password" maxlength="255" size="25" type="password" /></td>
</tr>
<tr>
<td>Confirm password:</td>
<td><input name="password2" maxlength="255" size="25" type="password" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Register" /></td>
</tr>
</table></div>
</body>
</html>
When I post it doews show the alert but on a blank page. The form vanish when i press submit. How can I do so it still shows the the html?
The message pops up but on a blank page. I want it to still show the page your on
First, You need to put the script in the tags, instead of above the DOCTYPE. Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My website</title>
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
<?php
if (count($_POST)) {
msg('TEST!!!!!');
}
?>
</head>
After that, there might be more problems.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My website</title>
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
<script type='text/javascript'>
(function(){
var countPost = <?php echo ((count($_POST)>0)?count($_POST):0); ?>;
if (countPost>0)
alert('msg test');
})()
</script>
</head>

Categories

Resources