I'm working with classic ASP.
I have an 2 includes that have 2 different forms on them. They are both unique in name. However, when I try to read the value of the one the elements in the 2nd form I get an error saying it is null. However, when I view the source in Firebug I can see that in face there is a value in that element.
My javascript code:
console.log(document.getElementById('focusValue').value);
Output from firebug:
<input id="focusValue" type="hidden" value="1006" name="focusValue">
Is there something I need to do because there are 2 forms on this "rendered" screen? The only other thing I think I should mention is that these pages are in an iFrame. Not sure if that really matters...
An iFrame creates a separate document within the containing document, you need to get a reference to that document before you can access its content. There is a reasonable tutorial at http://www.dyn-web.com/tutorials/iframes/.
If you only have one iFrame in the page, then you can reference it by:
var frame = window.frames[0];
Or you could use an id with getElementById. To get a reference to the document:
var doc;
if (frame) {
doc = frame.contentDocument || frame.contentWindow.document;
}
Now you can get to the input element:
var input = doc && doc.getElementById('focusValue');
Of course this all depends on you complying with the same origin policy, otherwise you can't access the frame content.
Can't see your page, so it's hard to debug. Assuming the script runs AFTER the forms. The only thing i can think is that there is more than one element on the page with the id "focusValue".
What happens when you console.log(document.getElementById('focusValue'))
Related
I have tried to create my first One Note Add In using the JavaScript API. I have tried the example in the MS documentaion (Build your first OneNote task pane add-in). This one works.
Now I want to try to change the formatting of an element in the document. For example I want to change the font colour of a text. However, I have not yet found a way to access the elements in a document.
Can I access elements in a document via a JS Add In to change their "style" property?
How can I do that?
Thanks
Micheal
Finally, I found a way to access the OneNote page content from the JS Add In. You can load the page content using
var page = context.application.getActivePage();
var pageContents = page.contents;
context.load(pageContents);
Now you have access to the page content in the qued commands.
return context.sync().then( function() {
var outline = pageContents.items[0].outline;
outline.appendHtml("<p>new paragraph</p>");
var p = outline.paragraphs;
context.load(p);
...
});
So consequently you can access element by element in document the hirarchy.
I need to get the value of the last column from the following url, so that I can use that for input for another url.
This url is being displayed in an iframe, with it's source coming from another domain (the domain in the url above).
The part of my function containing this code is currently looking like this:
if (url) {
document.getElementById('techtable').innerHTML =
'<iframe id="myframe" src="' + url + '"></iframe>';
overlay.setPosition(coordinates);
var iframe = document.getElementById("myframe");
console.log(iframe);
var docu = iframe.contentDocument;
console.log(docu);
var elmnt = docu.getElementsByTagName("table")[0];
console.log(elmnt);
var idtext = $('elmnt tbody tr:first td:last').text();
console.log(idtext);
}
The console.log's can be seen in this screen capture:
What happens is that the second console.log is showing the document from the iframe, but it is only returning an empty head and body tag, while these tags are filled in the first log. The problem is that I cannot find a reason why this is occurring. It might be the fact that the source is from another domain, although I do not see any errors in the console, or that my function/syntax is wrong.
So, if it's possible, how do I get the value of the last column of the table in the iframe?
Two issues merit investigation:
The posted code is synchronous - it attempts to log the content of the iframe element before giving it a chance to load content across the net from the url set in its src attribute.
Possibly, and perhaps even likely, the second log which was made synchronously could be showing the document of an "about:blank" document object initially loaded in the iframe element.
Given that objects logged on the console tend to be live, the first log entry may have been updated after iframe content was loaded - or the log entry in the screen shot was expanded after loading was complete.
Access to documents from different domains my be blocked for security reasons. This does not necessarily mean console.log is blocked from showing the content, it means access to the content from JavaScript may be impossible.
How to debug
a) Access iframe content from within load event listeners registered on the iframe element.
b) test using a url from the same domain. If that works but access fails for documents from a different domain then you may need to investigate CORS further. Discussing hypotheticals here is a little early.
I need to "load a page" inside of a page that the user is already on instead of redirecting them to that new page. It is my understanding that an iframe is the best way of doing this. I like jQuery's dialog box as a wrapper for this iframe content, as it looks nice and allows the user to reposition the popup as well as close it easily.
I'm having trouble accessing the elements on this iframe however. I want to be able to take data from the user's original window and add it to the new iframe's input elements, but I can't seem to find the syntax for doing this.
There is something in the code for the iframe page that overwrites jQuery's use of $, so I can't use $('#foo').text('bar'). I've been trying to find the correct syntax in pure javascript - like
var a = window.frames["e_frame"].document.getElementById ("title");
a.text = 'foobar';
where e_frame is the id I've given to my iframe, and title is the id of an element that loads in the iframe. I can see these both clearly in the developer console, but I cannot access them and I'm not sure what I'm doing wrong. Typing in the command above in the console gives me this error:
VM364:1 Uncaught TypeError: Cannot read property 'document' of undefined
at <anonymous>:1:28
and typing window.frames into the console to debug myself gives me way too many lines to go through since I'm not sure what I'm looking for.
Any ideas?
Have you tried this ?
var iframe = document.getElementById("e_frame");
var iframe_contents = iframe.contentDocument.getElementById('title');
I'm trying to use Javascript to retrieve elements from an HTML widget on the page. I can't just use the usual document.getelementsbyclassname etc. as the widget is treated as an embedded section of the page.
I have tried this:
var iframe = document.getElementsByClassName("widgetclassname")[0];
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
I've used that in the past for iframes but not for this. I'm getting this error:
Uncaught TypeError: Cannot read property 'contentDocument' of undefined
I've tried adding a delay and moving around items in case it's a timing thing (trying to get things before it's loaded properly) but it made no difference.
I can't use ID instead of classname as the widget doesn't have one and I can't change that.
Cannot read property 'contentDocument' of undefined means "Hey! iframe is undefined!" Which means that your getElementsByClassName() is returning an empty node list.
We cannot help you further without a way of looking at the document you are trying to query. Are you using the developer tools to ensure that the <iframe> you want has that class on it? Exactly, no typos, no case changes?
Alternatively, you can try using:
// first iframe in the document
var iframe = document.querySelector('iframe');
// third iframe in the document
var iframe = document.querySelectorAll('iframe')[2];
Edit: in response to our chat discussion, the problem is that the page is dynamically loading content, and the script you are trying to run is taking place before that content has been loaded.
A simple hack is to wait for the element you want to load and then run the code you want. For example:
document.title = "Search Results - AvenaGo";
var waitForHotel = setInterval(function(){
var hotelName = document.querySelector('.hotel_page-hotel_name');
if (hotelName) {
clearInterval(waitForHotel);
document.title = hotelName.textContent + ' - AvenaGo';
}
}, 100);
Every 100ms this code will run and check to see if an element with the class hotel_page-hotel_name has loaded yet. If it has, it will stop checking, and modify the title of the page based on the text in that element.
I was doing the google XSS games (https://xss-game.appspot.com/level2), but I couldn't quite figure out why level 2 wasn't working the way I was expecting. Even though the hint says that script tags won't work, I didn't know why. My question is basically when are dynamic script tags executed and does this vary by browser?
I tried something simple as:
<script>alert();</script>
And while it adds the element to the page, it doesn't do what I had hoped.
I found this post which has the same problem, but the solution is just an answer, but not an explanation:
Dynamically added script will not execute
If a site sanitizes only SCRIPT tags but allows other HTML - it opens itself to XSS. The hint in the Level 2 is text in the message window having some HTML formatting (italic, color etc.) so the assumption here - HTML tags are allowed.
So you can enter something like
<i>Hello Xss</i>
Into the message window to display text in italic. But a DOM element can have an event handler attached to it - you can include executable JavaScript into event handler without any SCRIPT tags.
Try entering this into message window:
<i onmouseover="alert(1)">Hello Xss</i>
and after submitting message wave mouse over your message text.
The answer to your question is that <script> tags added via .innerHTML do not execute.
From https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML :
Security considerations
It is not uncommon to see innerHTML used to insert text in a web page. This comes with a security risk.
var name = "John";
// assuming el is an HTML DOM element
el.innerHTML = name; // harmless in this case
// ...
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
Although this may look like a cross-site scripting attack, the result is harmless. HTML5 specifies that a tag inserted via innerHTML should not execute.
However, there are ways to execute JavaScript without using elements, so there is still a security risk whenever you use innerHTML to set strings over which you have no control. For example:
var name = "<img src=x onerror=alert(1)>";
el.innerHTML = name; // shows the alert