Scraping elements inside an ajax form - javascript

I have an website with an ajax form, and i want to get the inner text of a specific element inside that form.
The element doesn't exist when the page is first loaded.
I'm building a chrome extension to get that innertext value and print it to the console.
As i'm very new to JS, i just made the following code:
document.addEventListener('click', function () {
let text = document.querySelector("#\\39 8");
if (text !== null) {
console.log(text.innerText)
} else {
console.log('Nothing')
}
})
So i'm randomly clicking the webpage getting "Nothing"s, and expecting that when the element gets loaded i'll eventually get the innerText.
Problem is, as soon as i make the login into the webpage, i have nothing on the console. No "Nothing"s, no innerText..
My manifest includes all urls
{
"name":"Teste",
"version": "1.0",
"description": "Testing",
"manifest_version": 2,
"permissions":["storage"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["background.js"]
}]
}
Question is, what am i doing wrong? Shouldn't be expectable to have the innerText of that element being printed to the console?
EDIT:
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"><head></head>
<frameset rows="82,*,0,0" framespacing="0" frameborder="0" id="FS"></frameset>
<frame name="Display" scrolling="no" piweb_src="action=../screen/display.html"></frame>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<body class="screenDisplay"></body>
<iframe name="MrcSessionA" id="MrcSessionA" frameborder="0" scrolling="no" style="display: inline;"></iframe>
#document
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<frameset id="Working" cols="*,800" border="2" bordercolor="#CCCCCC" framespacing="2" style="width: auto;"></frameset>
<frameset rows="70,*" framespacing="0" frameborder="0" style="width: auto;">
<frame name="EmulatorScreenMrcSessionA" id="EmulatorScreenMrcSessionA" scrolling="no" piweb_src="action=../applications/as400/emulator/help.html?IdentTab=MrcSessionA">
<html>
<body id="EmulatorBody">
<div id="DivBody" style="height: 488px;">
<form action="" name="PiTnForm" id="PiTnForm" method="post" onsubmit="return false;" autocomplete="off"></form>
<table id="emulatorTable" class="Ps80" style="border-collapse: separate;"></table>
<tbody id="AllPsRows">
<tr onclick="SelectOptionLine('')">
<td colspan = "17">
<input type="text" name="NewV" id="602" onfocus="GeneFocusOn(this);setCharShiftFocus({target:this});" onblur="GeneFocusOff(this)" onmouseup="GeneGetCPInputKey(this, event,true)" onkeyup="GenePsAutoTab(this,'17',event);setCharShiftFocus({target:this});" style="color:black; " maxlength="17" fa="U u " colour="G u " autotab="true" class="">
This is the tree of elements that i have. I'm trying to access the last row, the input textbox.

Related

How to check that a frame of frameset exists

I have a frameset that has 3 frames:
<frameset rows="124, *, 0">
<frame id="f1" scrolling="No" frameborder="0" src="" name="control">
<frame id="f2" frameborder="0" src="" name="main">
<frame id="f3" noresize frameborder="0" name="go">
</frameset>
I'm going to check if frame with id = "f2" exist?
I have tried :
<script>
if( document.getElementById("f2").contentDocument.documentElement.innerHTML !== null) {
alert('ok');
}
</script>
But not worked.
I know i should do something like:
document.getElementById("f2")
but need more info
Well - actually what you should do is only check if document.getElementById("f2") return something, however in order for this to work you must set the doctype of your document to frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Otherwise the browser will not recognize the frame, and it will return nothing.
Check this fiddle:
https://jsfiddle.net/b8xg9y8u/
document.getElementById() returns null if the element doesn't exist, so the expression will be false, either add ! at the begining, or add your code in the else case
if (!document.getElementById("f2")) {
}
or
if (document.getElementById("f2")) {
} else {
}

Cross Domain set iframe height dynamically

I have looked up many examples for cross domain iframe height but none of them were able to solve the issue.
I have an simple HTML given below. I want to resize the iframe inside it according to the height of the content.
<!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" />
</head>
<body >
<table width="780" height="406" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" style="border:1">
<tr>
<td valign="top"><table width="778" border="0" cellspacing="0" cellpadding="0">
</td>
</tr>
</table>
<iframe src="http://mywebapplication.com" width="100%" ></iframe
<table width="780" border="0" cellpadding="0" cellspacing="0" bgcolor="53575f">
<tr>
<td align="center" height="38"><span class="Footer">All Rights Reserved © ABC 2009-2012.
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
What i Have tried
using a second javascript file added to the iframe to send a postMessage back to the parent.
HTML Page containing iframe
<iframe src="http://mywebapplication.com" width="100%" id="zino_iframe"></iframe>
<script type="text/javascript">
var zino_resize = function (event) {
alert("sds");
var zino_iframe = document.getElementById('zino_iframe');
if (event.origin !== "http://hrcraft.noviavia.com") {
return;
}
//alert(zino_iframe);
if (zino_iframe) {
alert(event.data);
zino_iframe.style.height = event.data + "px";
}
};
if (window.addEventListener) {
window.addEventListener("message", zino_resize, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", zino_resize);
}
window.addEventListener("message", myListener, false);
function myListener(event) {
if (event.origin !== "http://hrcraft.noviavia.com") {
return;
}
//do something
}
The function for sending height is also added on the master page of the mywebapplication.
I have been following this example
http://zinoui.com/blog/cross-domain-iframe-resize
Although the question is in relation to solving an issue with the OP own personal code. Their is a tried and tested library can be used to solve the issue of resizing an iframe to the contents height. This library deals with cross domain and so I think it is worth mentioning.
https://davidjbradshaw.github.io/iframe-resizer/
you place two files one in the parent one in the child (iframe)
in your parent:
<style>iframe{width:100%}</style>
<iframe src="http://anotherdomain.com/iframe.html" scrolling="no"></iframe>
<script>iFrameResize({log:true})</script>
In your child you just add this file:
iframeResizer.contentWindow.min.js
The library takes care of the resizing and also cross domain. Check the docs.

window.myframeid.location.href is not working on google chrome

I have a page that uses an iframe. Underneath that there is a frameset which has two frames. One of the frame id is myframeid. Here is the code snippet.
<html>
<head></head>
<body>
<iframe name="someiframe" src="/app/html/files">
<html>
<head></head>
<body>
<script>
function thismyfunction(dObj, dTo, dCode){
if (dTo == 'start'){
if (tempora) {
if (confirm('Is this correct?')){
window.myframeid.location.href = '/code/cgi/bin';
}
} else {
if (confirm('Prefer to view your account?')){
window.myframeid.location.href = '/code/welcome/account';
} }
}
}
</script>
<frameset cols="30%, 70%" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
<frame name="someframe" id="topframe" src="/app/source/default.htm" scrolling="no">
<frame name="someframe2" id="myframeid" src="/app/html/load">
<input type="button" onclick="parent.thismyfunction(this.form, 'start')"
id="nicebutton" value="Hello world" />
</frameset>
</body>
</head>
</html>
</iframe>
</body>
</head>
</html>
This is working on IE 11 but not working on google chrome version 36. Working as in when I click on the button using IE 11 browser, the function works. but not in google chrome. I think the google chrome doesn't like the below code.
window.myframeid.location.href = '/code/cgi/bin';
Any ideas why? Thank you!
myframeid is an id, you can get a reference with document.getElementById('myframeid'). You can load a new page by setting its src attribute.

Print pdf from iframe

I dynamically create a pdf in a iframe:
<iframe name="output" id="output"></iframe>
and try to print from it:
window.frames["output"].focus();
window.frames["output"].print();
But how you can see in this example:
http://jsfiddle.net/FEvq6/78/
It prints a blank site.
It prints blank page because you're printing the iframe itself. Here is what you should do:
1. The iframe should contain EMBED tag which will load the PDF (for some reason stack overflow did not formatted code well, please see paste bin link below):
< embed src="path_to_script_which_generates.pdf" type="application/pdf" id="pdf"
width="100%" height="100%">
< /embed>
2. Then you should call the EMBED object to print the document. But since it may require some time for it to load you would need a timeout:
var doPrinting = (id){
var pdfObject = document.getElementById(id);
if (typeof(pdfObject.print) === 'undefined') {
setTimeout(function(){ doPrinting(id); }, 1000);
} else {
pdfObject.print();
}
}
doPrinting('pdf');
Here is paste bin of the above: http://pastebin.com/s6qSTE8t
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<strike>funny</strike>.
<iframe src="file_to_print.pdf" class="frameSet" type="application/pdf" runat="server" name="I5" scrolling="yes" width="100%" height="400"> </iframe>
</body>
</html>

generate links with a greasemonkey script

I'm trying to write a script in Greasemonkey that will generate link's in a frame, but with my limited Javascript knowledge I don't really know how to do this.
Example of subject:
<html>
<head>
<frameset border="0" frameborder="no" framespacing="0" cols="*,280" rows="*">
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,200">
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="75,*">
<frame scrolling="NO" name="bannerFrame" src="banner.php">
<frame scrolling="auto" name="mainFrame" src="main.php">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<body class="framemainbg" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<table class="areadescription" cellspacing="0" cellpadding="0" border="0">
<br>
<table>
<tbody>
<tr>
<td>
<p class="personlistcaption">Text:</p>
<p class="listusersrow">
<table>
<tbody>
<tr>
<td valign="top">
<td valign="top">
<b>Text </b>
Text -
Attack
-
<a class="fastattack" onclick="this.href += '&yscroll=' + window.pageYOffset;" href="fight.php?action=attacknpc&checkid=8409099&act_npc_id=764">Quickattack</a>
<br>
Text
</td>
</tr>
</tbody>
</table>
</p>
</td>
</tr>
</tbody>
</table>
<br>
<table>
<form name="formular">
</body>
</html>
</frame>
</frameset>
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,0">
</frameset>
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,360">
</frameset>
<noframes><body> Text </body></noframes>
</html>
Example of desired Output :
<html>
<head>
<frameset border="0" frameborder="no" framespacing="0" cols="*,280" rows="*">
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,200">
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="75,*">
<frame scrolling="NO" name="bannerFrame" src="banner.php">
<frame scrolling="auto" name="mainFrame" src="main.php">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<body class="framemainbg" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<table class="areadescription" cellspacing="0" cellpadding="0" border="0">
<br>
<table>
<tbody>
<tr>
<td>
<p class="personlistcaption">Text:</p>
<p class="listusersrow">
<table>
<tbody>
<tr>
<td valign="top">
<td valign="top">
<b>Text </b>
Text -
Attack
-
<a class="fastattack" onclick="this.href += '&yscroll=' + window.pageYOffset;" href="fight.php?action=attacknpc&checkid=8409099act_npc_id=764">Quickattack</a>
-
Hit
-
Chase
<br>
Text
</td>
</tr>
</tbody>
</table>
</p>
</td>
</tr>
</tbody>
</table>
<br>
<table>
<form name="formular">
</body>
</html>
</frame>
</frameset>
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,0">
</frameset>
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,360">
</frameset>
<noframes><body> Text </body></noframes>
</html>
This Links should be generated:
-
Hit
-
Chase
The 'checkid=...' and the 'npc_id=...' must be the same value as in this link:
<a class="fastattack" onclick="this.href += '&yscroll=' + window.pageYOffset;" href="fight.php?action=attacknpc&checkid=8409099act_npc_id=764">Quickattack</a>
OK, this is really just basic HTML DOM manipulation, there's nothing GreaseMonkey-specific here.
First, I'm going to assume that the link you want to copy the URL parameters from is the only one with class="fastattack", since that makes finding it easy:
var link = document.getElementsByClassName( 'fastattack' )[0];
if ( link ) {
// we found the link, do stuff with it...
Next, we need to generate the first new link:
var newlink = document.createElement( 'a' );
...make it point to the URL we want:
newlink.href = link.href.replace( 'action=attacknpc', 'action=slapnpc' );
...and give it the link text we want:
newlink.textContent = 'Hit';
Next, we insert the new link into the DOM just after the original link, like this:
var nextNode = link.nextSibling;
link.parentNode.insertBefore( newlink, nextNode );
Oops, we forgot to insert the delimiter first! No worries, we can still do that:
var delim = document.createTextNode( ' - ' );
link.parentNode.insertBefore( delim, newlink );
Now we can just do the same for the other link:
var newlink2 = document.createElement( 'a' );
newlink2.href = link.href.replace( 'action=attacknpc', 'action=chasenpc' );
newlink2.textContent = 'Chase';
link.parentNode.insertBefore( delim.cloneNode( true ), nextNode );
link.parentNode.insertBefore( newlink2, nextNode );
This time, I remembered to insert the delimiter first. I used the same delim node as above, but I made a copy of it because I wanted to insert another identical delimiter, not move the original delimiter to a new position in the DOM.
Finally, we need to close the if block, and that's it:
}
(Disclaimer: I have not actually tested the code above. I think it should work, but there might be bugs or typos that I've missed.)
Edit: Changed the code to insert the new links just after the original, rather than at the end of the parent paragraph.
Addendum:
If you have multiple links with class="fastattack" in the document, and wish to apply the code above to each of them, you can do that by replacing the first two lines above with a loop over all the links, instead of just the first one:
var links = document.getElementsByClassName( 'fastattack' );
for ( var i = 0; i < links.length; i++ ) {
var link = links[i];
// now do stuff with link just like above

Categories

Resources