Get elements inside several html documents - javascript

I have a functionality in my system that transcripts from voice to text using an external library.
This is what the library renders:
What I need is really simple: to get the text from the generated textareas.
The textareas are rendered without any name or id, so I can only access them by class in the Google Chrome console. Whenever I try to get them by class in my javascript code, I get an array of [0] elements.
I think that the problem is that this library renders a new #document and I'm not able to get it's content in my $(document).ready function because it scopes the 'parent' document.
How it renders.
Any thoughts on this? Thank you.

I hope the code below helps.
// Get you iframe by Id or other way
let iframe = document.getElementById("myFrame");
// After iframe has been loaded
iframe.onload= function() {
// Get the element inside your iframe
// There are a lot of ways to do it
// It is good practice to store DOM objects in variables that start with $
let $elementByTag = iframe.contentWindow.document.getElementsByTagName("p")[0];
let $elementById = iframe.contentWindow.document.getElementById("elementId");
let $elementByClass = iframe.contentWindow.document.getElementsByClassName("classHere");
let $elementBySelector = iframe.contentWindow.document.querySelector("#dad .classname");
// After get the element extract the text/html
let text = $element.innerText
let html = $element.innerHTML
};

Related

how to jump to page of rendered pdf

Im using pdfobject along with forcePDFJS which uses pdfjs viewer.js to render pdf's.. Once they are rendered I need to be able to jump to pages without reloading the document.. The documents can be pretty large
I've seen some mentions about using PDFApplicationViewer.pdfview.currentPageNumber. but I haven't seen a good example on how to use it correclty
I've seen two example of using the PDFApplicationViewer
1. PDFApplicationViewer.pdfview.currentPageNumber = pagNum;
2. document.getElementById('mycanvas').contentWindow.PDFApplicationViewer.pdfview.currentPageNumber = pagNum;
Althought the second on make more sense Im not sure where the contentWindow object from the element comes from. Im assuming the pdfobject embeds something that I could get access too but I can't figure it out..
Also, since I couldn't really find alot on this.. Is this even possible..
For time constraint reasons I don't want to have to put together a new viewer using pdfjs.. I like what comes with the viewer.html.. I just need to jump the pages without reloading
PDFObject.embed doesn't return any reference So I looked into the pdfObject code to see how it was embedding the pdf..
for this to work there needs to be a iframe.. So when rendering with pdfobject Im using a configureation as follows:
Notice forcePDFJS=true
if(!pageNum)
pageNum=1;
var options = {
pdfOpenParams: {
view: "FitV",
page: pageNum
},
forcePDFJS: true,
PDFJS_URL: "../pdfjs/web/viewer.html"
};
Here is code that works
var pdfviewer = document.getElementById('pdfviewer');//get the viewer element
var contenttag = pdfviewer.getElementsByTagName("iframe")[0]//got this from pdfobject code
contenttag.contentWindow.PDFViewerApplication.pdfViewer.currentPageNumber = parseInt(pageNum);//change the page
In my case, the pdfviewer id is not available anymore.
PDFObject does return the reference of iframe that it creates. I was using basic HTML + JS so I had to save that reference to global window object to be able to access it from anywhere in the project.
Finally, with the reference we have, we can access the PDFViewerApplication object as below and manipulate the PDF:

Getting an iframe that's nested within another iframe chrome extension

I've been trying to make an extension that gets the source of video players on the web by looking at the iframe sources, however it turns out a lot of those iframes have iframes nested inside of them where the actual video is, or sometimes it's even another iframe deep. I've been trying to look deeper with things js like this:
var iframe = document.getElementsByTagName("iframe");
var nestedframes = iframe.getElementsByTagName("iframe");
and like this:
var iframe = document.getElementsByTagName("iframe");
var innerDoc = iframe.contentWindow.webbody.innerHTML;
var nestedframes = innerDoc.getElementsByTagName("iframe");
but they return this error: contentscript.js:6 Uncaught TypeError: iframe.getElementsByTagName is not a function.
If anyone has any ideas that would be greatly appreciated.
getElementsByTagName() method gets all elements on the document with the specified tag name. It means that it gives you a list of elements.
So you should itearate over it or select single element to call another DOM method. (Notice [0])
var iframe = document.getElementsByTagName("iframe")[0];
var nestedframes = iframe.getElementsByTagName("iframe");

How to read the generated source (html with DOM changes) of a webpage within javascript?

I want to read a webpage programmatically (with javascript-angular) and search some elements inside. What i have until now is:
$http.get('http://.....').success(function(data) {
var doc = new DOMParser().parseFromString(data, 'text/html');
var result = doc.evaluate('//div[#class = \'xx\']/a', doc, null, XPathResult.STRING_TYPE, null);
$scope.all = result.stringValue;
});
so in the example i can read the value of any html element.
Very unluckily, the page i want to read uses some Javascript and the source code (html) is just a part of its entire html source (including DOM changes), which the browser at the end shows. So the html which is returned from the http get, does not necessarily contain the elements i need.
Is there a way of getting the entire html after the javascript run?
Edit: Yes the page is from another domain + The provided API does not give me the info i need.

How to prevent resource loading of unattached elements in Chrome

I'm working on Chrome extension and I have following problem:
var myDiv = document.createElement('div');
myDiv.innerHTML = '<img src="a.png">';
What happens now is that Chrome tries to load the "a.png" resource, even If I don't attach the "div" element to document. Is there a way to prevent it?
_In the extension I need to get data from a site that doesn't provide any API, so I have to parse the whole HTML to get the necessary data. Writing my own simple HTML parser could be tricky so I would rather use the native HTML parser. However, in Chrome when I put the whole source code to some temporary non-attached element (so it would get parsed and I could filter the necessary data), ale the images (and possibly other resources) start to load as well, causing higher traffic or (in case of relative paths) lots of errors in console. _
To prevent the resources from being loaded, you'll need to create your Node in an entirely new #document. You can use document.implementation.createHTMLDocument for this.
var dom = document.implementation.createHTMLDocument(); // make new #document
// now use this to..
var myDiv = dom.createElement('div'); // ..create a <div>
myDiv.innerHTML = '<img src="a.png">'; // ..parse HTML
You can delay parsing/loading html by storing it in non-standard attribute, then assigning it to innerHtml, "when the time comes":
myDiv.setAttribute('deferredHtml', '<img src="http://upload.wikimedia.org/wikipedia/commons/4/4e/Single_apple.png">');
global.loadDeferredImage = function() {
if(myDiv.hasAttribute('deferredHtml')) {
myDiv.innerHTML = myDiv.getAttribute('deferredHtml');
myDiv.removeAttribute('deferredHtml');
}
};
... onclick="loadDeferredImage()"
I created jsfiddle illustrating this idea:
http://jsfiddle.net/akhikhl/CbCst/3/

How to access files attribute of a file element using JavaScript

I have in my form an input element with type of file. What I like to do is to check the file size before the element is uploaded for validation issue. By using the majority of primary Web Browsers (except IE that always does things harder), I have find out that all are using an "attribute" that updated whenever I choose a new file and display the file size, as well other usefull information.
Here is what I see in Chrome web browser :
The question now is, how can I access that value with JavaScript ? I have try several ways, but none was good for me ? Any good idea please ?
NOTE: In my web site I use jQuery, so is not important to be only regular JavaScript the answer.
Kind regards
Merianos Nikos
//use any ol' selector to get the <input /> element:
var inputElement = document.querySelector("input[type='file']");
//then it's just like you'd access any object's attributes:
var fileSize = inputElement.files[0].size;
//note that it's a list of files, so you can loop through them
//in case the element accepts multiple files
//if you want all of the attributes, do something like:
for (var key in inputElement.files[0])
if (inputElement.files[0].hasOwnProperty(key))
console.log(key,inputElement.files[0][key]);
or :
$("#btStartUpload").on("click", function(evt) {
var filesSelected = document.getElementById('btInput').files; // FileList object
// var filesSelected = $('#btInput')[0].files; // with jQuery, any jQuery object have it's DOM element accessed using [0]
// var filesSelected = $('input[type=file]')[0].files;
console.log(filesSelected);
});

Categories

Resources