I have 3 html pages. main.html, page1.html and page2.html. I am displaying page1.html and page2.html in main.html using following code.
<html>
<frameset frameborder="1" rows="50%, *">
<frame src="page1.html" />
<frame src="page2.html"/>
</frameset>
</html>
page1.html code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<table id="resultDetails">
<th>Result Details</th>
<tr>
<td>Row 1</td>
<div id="r1">
<p> R1 data</p>
</div>
</tr>
</table>
</body>
</html>
And Page2.html code
<html>
<body>
<div id="myDiv">
<p> Testing.... </p>
</div>
</body>
</html>
My JavaScript myjs.js
$(document).ready(function () {
$('table tr').on('click', function () {
$('#r1').load('page2.html#myDiv');
});
});
With this code, on click on table row, i am able to display the "myDiv" content in "r1". But I want reverse behavior. i.e., on clicking row, content of div "r1" of page1 should be displayed in div "myDiv" of page2.
I tried $('page2.html#myDiv').html('#r1'); but no success.
Any thoughts
If possible change the frames to iframes. You are then able to access the elements in each of the iframes by using the .contents() function assuming the two iframes are on the same domain.
You would then do something like the following.
main.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</head>
<iframe id="page_1" src="page1.html"></iframe>
<iframe id="page_2" src="page2.html"></iframe>
</html>
page1.html
<html>
<body>
<table id="resultDetails">
<th>Result Details</th>
<tr>
<td>Row 1</td>
<div id="r1">
<p> R1 data</p>
</div>
</tr>
</table>
</body>
</html>
page2.html
<html>
<body>
<div id="myDiv">
<p> Testing.... </p>
</div>
</body>
</html>
myjs.js
$(window).on('load',function () {
$('#page_1').contents().bind('click','tr', function () {
$('#page_2').contents().find('#myDiv').html($('#page_1').contents().find('#r1').html())
});
});
Related
This question already has answers here:
How to Pass values form One html Page to Another html Page javascript?
(3 answers)
Closed 3 years ago.
I'm new to HTML and javascript. So basically I have 2 HTML files
a.html
<html>
<head>
<!-- Some Stuff-->
</head>
<body>
<script>
</script>
<!--In this part there is going to be a url of pdf.
I want that URL to be transferred to b.html
so that the same pdf could be shown.-->
</body>
</html>
b.html
<html>
<!-- Code goes here-->
</html>
<html>
<head>
<script language="javascript" type="text/javascript"
src="asd.js">
<body>
<form name="form1" action="next.html" method="get">
name:<input type ="text" id="name" name="n">
<input type="submit" value="next" >
<button type="button" id="print" onClick="testJS()"> Print </button>
</form>
</body>
</html>
<head>
<script language="javascript" type="text/javascript" src="asd.js">
</script>
</head>
<body>
function testJS()
{
var b = document.getElementById('name').value
document.getElementById('here').innerHTML = b;
}
<form name="form1" action="next.html" method="get">
<table>
<tr>
<td id="here">test</td>
</tr>
</table>
</form>
I'm using math formula in ckeditor, when I insert new content by textarea, it can read math formula, but if I edit this content, it seem can not read and display text formula as before..
this is my source:
<head>
<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [['\\(','\\)']]}});</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"> </script>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<span >Question Code : <%=id_q%> - <%=valid_types%> (Number presented : <%=make_cnt%>)</span>
<table border="0">
<tr>
<td width="640" height="650">
<textarea name="ir1" id="ir1" rows="1" cols="10" style="width:580px; height:600px; min-width:400px; min-height:50px; display:none;"></textarea>
<script>
var ir1 = CKEDITOR.replace('ir1', {
extraPlugins: 'mathjax,video,font,justify,preview,colorbutton,panelbutton',
mathJaxLib: 'https://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS_HTML'
});
CKFinder.setupCKEditor(ir1, 'libraries/ckfinder/');
</script>
</td>
</tr>
</table>
</body>
This is result when I cliked edit button for content:
How to display correct mathjax in ckeditor when edit content? thanks
You could try to move the MathJax-script to the bottom of your head tag like this:
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [['\\(','\\)']]}});</script>
</head>
To ensure the code has access to the MathJax namespace.
I got AutoIt to work with my router login page. However for our HP Pro Curve Switch.. I can't get it to work...
#NoTrayIcon
#include <ie.au3>
$Address = "http://10.255.96.2/index.html"
$pwd="mypassword"
$oIE = _IECreate ($Address)
_IELoadWait($oIE)
$oForm = _IEFormGetObjByName ($oIE, "maindata")
for $stuff in $oForm
if $stuff.name = "password" and $stuff.type = "password" then _IEFormElementSetValue ($stuff, $pwd)
If $stuff.value == "Login" and $stuff.type = "submit" Then $stuff.click
Next
exit
I get "H:\loginToSwitch.au3" (10) : ==> Variable must be of type "Object".:
Basically the "maindata" is incorect.
Here is the HTML if I right click on the page and view source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta name=Copyright content="Copyright (c) 2005 HP Networks, Inc. All Rights Reserved.">
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<meta http-equiv="Pragma" content="no-cache">
<title>HP Networks Web Interface</title>
<script src="/mainjs.js" language=javascript type="text/javascript"></script>
<script language="javascript" type="text/javascript">
//<!--
checkFrame(); // Ensure we are not within a frame
implementLoginFrames('login.html');
document.write('<noframes>');
//-->
</script>
</head>
<body BGCOLOR="#DAE3EB">
<center>
<font color="#008BD1" face="Arial, Helvetica, sans-serif"><B>Please ensure that your browser supports Frames and Javascript, and that they are both enabled.</b></font>
</center>
<script language="javascript" type="text/javascript">
//<!--
document.write('<\/noframes>');
//-->
</script>
</body>
</html>
However, when I use firefox to identify elements... it gives me a completely different code (which is what I got the buttons and textbox info from):
<html>
<head></head>
<frameset framespacing="0" border="0" frameborder="0" rows="80,*">
<frameset framespacing="0" border="0" frameborder="0" cols="*,22"></frameset>
<frame src="login.html" noresize="" name="loginFrame" scrolling="auto">
#document
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head></head>
<body onload="loadConfiguration();">
<script type="text/javascript" language="javascript"></script>
<form onsubmit="return login();" name="tF" method="post" action="login.html">
<table class="container" style="height: 650px">
<tbody>
<tr>
<td class="container">
<div class="container">
<div class="loginbox">
<!--
Login box HTML code here...
-->
<table class="login">
<tbody>
<tr>
<td id="devname" class="hdr style2" style="color: #ffffff; font-family: Arial, Helvetica, sans-serif;" colspan="2"></td>
</tr>
<tr>
<td class="hdr style2" valign="top"></td>
<td class="maindata">
<input id="password" type="password" onkeypress="capsCheck(event);" size="20" name="password" maxlength="16"></input>
<script type="text/javascript" language="javascript"></script>
<input class="button" type="submit" style="position: relative; top: 2;" value="Login"></input>
<br></br>
<span id="passwd" class="default" style="display: none;"></span>
</td>
</tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
<span id="wrong" class="warning" style="display: none;"></span>
<br></br>
<span id="capsmsg" class="warning" style="display: none;"></span>
<br></br>
It is recommended that you use a minimum of
<br></br>
Microsoft® Internet Explorer 5.5 to view the Inter…
<br></br>
<br></br>
<!--
Login box HTML end...
-->
</div>
</div>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" language="javascript"></script>
</form>
</body>
</html>
</frame>
</frameset>
<noframes></noframes>
</html>
_IEFormGetObjByName() Returns an object variable, not a collection.
Use _IETagNameAllGetCollection($oForm) to list all of the element inside a object.
Edit:
I have looked closely to the html and I see that the password field has ID and NAME attributes. Use _IEGetObjById to get the object of a password field.
#NoTrayIcon
#include <ie.au3>
$Address = "http://10.255.96.2/index.html"
$pwd="mypassword"
$oIE = _IECreate ($Address)
;_IELoadWait($oIE) Not needed because IECreate does wait for page to load by default.
$oPassword = _IEGetObjById($oIE, "password")
_IEFormElementSetValue ($oPassword, $pwd)
$oForm = _IEGetObByName($oIE, "tF")
_IEFormSubmit($oForm)
I have 3 html pages. main.html, page1.html and page2.html. I am displaying page1.html and page2.html in main.html using following code.
<!DOCTYPE html>
<html>
<frameset frameborder="1" rows="50%, *">
<frame name="f1" src="Page1.html" />
<frame name="f2" src="Page2.html"/>
</frameset>
</html>
page1.html code
<!DOCTYPE html>
<html>
<head>
<style>
.content {display:none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<table id="resultDetails" border="1">
<th>Result Details</th>
<tr>
<td>
Click on me to see more details in other page
<div class="content">
<p> R1 data</p>
</div>
</td>
</tr>
</table>
</body>
</html>
And Page2.html code
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</body>
</html>
My JavaScript myjs.js
$(document).ready(function () {
$('table').on('click', 'tr', function () {
var doc =window.top.frames['f2'].document;
var divElmnt = $(doc.getElementById('myDiv'));
$(divElmnt.html($(this).find('.content').html()));
});
});
With this code, on clicking on table row, i am able to display the div "content" content in "mydiv" div of page2.
This works in IE and FF but wont work in Chrome. Error: doc is undefined.
What is the equivalent for window.top.frames['f2'] for chrome.
Give your FrameSet and your Frame an ID:
var $fs = $("#fs");
var f2 = $fs.find("#f2");
f2 is now a jQuery object.
Issue was with Chrome security flag for local files i.e., file:/// . After launching Chrome with "--allow-file-access-from-files" flag option, top.frames worked.
Also I found a useful document on Inter-Frame Communication with JavaScript here.
I was trying to insert a table in iframe when I click a button, but I get an error in the method "pasteHTML" .
Here is the code I wrote:
<html>
<body>
<input type = "button" onClick="setContent()" value="getContent"></input>
<iframe id = "iframe" border="0" >
</iframe>
<script type="text/javascript">
var iframe = document.getElementById('iframe');
iframe.contentDocument.designMode = "on";
function setContent()
{
var iframe = document.getElementById('iframe');
var str = "<table><tr><td>dushyanth</td></tr></table>";
var sel = iframe.document.selection.createRange();
sel.pasteHTML(str);
sel.select();
}
</script>
Is it necessary for you to use only java script? . This can achieved using other ways too like using .load() inside java script function.
<html>
<head>
<script type="text/javascript">
function setContent() {
$('divId').load('another.html')
}
</script>
</head>
<body>
<input type = "button" onClick="setContent()" value="getContent"/>
<div id="divId"></div>
</body>
</html>
another.html
<table>
<tr>
<td>xyz</td>
</tr>
</table>
If you want to use iframe then use following code,
<html>
<head>
<script type="text/javascript">
function setContent() {
$('divId').load('iframepage.html')
}
</script>
</head>
<body>
<input type = "button" onClick="setContent()" value="getContent"/>
<div id="divId"></div>
</body>
</html>
iframepage.html
<html>
<body>
<iframe width="500px" height="400" src="anotherpage.html"></iframe>
</body>
</html>
anotherpage.html
<table>
<tr>
<td>xyz</td>
</tr>
</table>
Try this:
var ifr = document.getElementById('iframe');
ifr.src='javascript:"<table><tr><td>dushyanth</td></tr></table>"';
Live demo: http://jsfiddle.net/3Efva/