I have a webpage (parent) on localhost,
with an iframe showing another url (child; which is part of a different webapp) on localhost.
Using javascript in parent-page, I am trying to "peek" into the iframe.contentDocument.
(The iframe is showing a list of items, and if the list is empty, I simply want to hide the iframe completely.)
Now, the problem is, when trying to retrieve the element iframe.contentDocument.body,
I get error-msg in firefox:
Permission denied to access property 'body'
In IE, I simply get:
Error: 'body' is null or not an object.
Anyone, knows how to get around this?
Thanks,
I've seen two potential work-arounds for this error where body returns null. One is to simply bury your script at the bottom of the body, so that it doesn't execute before body has been built out. But everybody hates inline scripts, no?
Another, from here, is to use an onload function for your body, which also ensures that body exists before the function is called.
Both seem to work equivalently well.
Related
I am trying to build an automated Puppeteer script to download my monthly bank transactions from my bank website.
However, I am encountering a strange error (see attached Imgur for pictures of this behavior)
https://imgur.com/a/rSwCAxj
Problem: querySelector returns null on DOM element that is clearly visible:
Screenshot: https://imgur.com/d540E6p
(1) Input box for username is clearly visible on site (https://internet.ocbc.com/internet-banking/),
(2) However, when I run document.querySelector('#access-code'), console returns null.
I'm wondering why this behavior is so, and what are the circumstances that a browser would return null on a querySelector(#id) query when the DOM node is clearly visible.
# EDIT: Weird workaround that works:
I was continuing to play around with the browser, and used DevTools to inspect the DOM element and use it to Copy the JS Path.
Weirdly, after using Chrome Devtools to copy the JS Path, document.querySelector('#access-code') returned the correct element.
Screenshot of it returning the correct element: https://imgur.com/a/rSwCAxj
In both cases, the exact same search string is used for document.querySelector.
I believe that you cannot get proper value using document.querySelector('#access-code') because a website use frameset.
In the website there is frame with src to load content
<frame src="/internet-banking/Login/Login">
DOMContentLoading is executed when main document is loaded and not wait for frame content to be loaded.
First of all you need to have listener for load event.
window.addEventListener("load",function() {
...
});
And later on you cannot simply use document.querySelector('#access-code')
because input yuo want to get is inside frame. You will need to find a way to access frame content and than inside of it use simple querySelector.
So something like:
window.addEventListener("load",function() {
console.log(window.frames[0].document.querySelector('#access-code'));
});
BTW please see in: view-source:https://internet.ocbc.com/internet-banking/ looks like website is mostly rendered client-side.
As the title suggests, does anyone know how to eliminate the need for top or parent in iFrame localized scripts?
In the screenshot below, I get a "not defined" error unless I add top or parent as a prefix to my function call.
test(); does NOT work
top.test(); works OK
You must have some errors in different part of your code which you didn't post here (actually you didn't post ANY code, only meaningless screenshot of DOM inspector...). This should work just fine without top and parent.
I'm green to javascript, but I have some C++ in my background, so I understand the principles of coding, just don't do much web stuff.
I have an e-mail link that needs to do one of two things depending upon whether an iframe exists. This code exists in the parent page (index.html), so the iframe would be a child (I presume).
If there is no iframe yet, I need this code (gb_page_fs[] calls some code to create the iframe).
e-mail
If the iframe exists it would be named "GB_frame" and this is the code I would need for the link:
e-mail
I have two issues: Trying to identify if the frame exists and executing the second case code. I've seen a lot of code to identify parent iFrame names, but not child. The closest I've gotten with that is document.getElementById("framename").name, but I'm getting "Cannot read property 'name' of null". As for the latter, I'm guessing there is a simple solution, but I don't know where to start looking.
You are on the right track testing for the iframe. You want to do something like this:
var x = document.getElementById('framename');
// if the iframe doesn't exist x will be null and the if statement evaluates to false
if(x)
{
doSomething();
}
To set the source of the iframe:
document.getElementById('framename').src = 'url to page';
$('<script/>', {
src: '/path/to/javascript.js',
type: 'text/javascript'
}).appendTo($('#iframe').contents().find('body'));
Correct me if I'm wrong, but I think that should load the JS into the iframe. I've also tried appending to head.
The problem
javascript.js is executed, but console.debug(this) in that script returns the top frame window. I've tried to verify that the script is actually included in the iframe, but don't really know how.
Additionally, running $('a') from javascript.js returns all links in the top frame, not every link in the iframe which I'd like.
Thanks for your time!
Update: I've put together an isolated test case which you also can download. Check the console and note that this is the top frame (can be verified by the variable _TOP).
This is kind of a grey area. For this specific action using jQuery, under the hood you're using importNode or adoptNode depending on the browser. However, IE won't support either (since I last researched it).
You might want to get a reference to the document, and write the script. If memory serves me right:
$('<iframe/>')[0].contentDocument.document.write('script');
I was able to make something in the same domain iframe update:
http://jsfiddle.net/maniator/DX6bg/1/
Make sure that the two URLs are in the same domain.
(including if there is a www in from or not)
UPDATE
You can test it like this:
$(function(){
var iframe = $('#iframe').contents();
$('body', iframe).append($('<div>', {text: 'this is a test'}));
});
now if you see the text this is a test in the iframe you know it is working
I have one page which have chat application,wall comments,uploading photos,videos on that page.All is working fine on mozilla firefox,chrome but does not work on IE7.It gives two error
jquery-1.4.4.min.js
HTML Parsing error.Unable to modify
the parent container element before
the child element is closed
(KB9278917).
Because of this error my rightside bar of this page is not seeing & chat application is also not working.
Please reply me as early as possible.
Thank you
This question discusses the error message you have listed as (2).
You're modifying document while it's being loaded (when browser hasn't "seen" closing tag for this element) . This causes very tricky situation in the parser and in IE it's not allowed.
Since you're using jQuery, you can probably avoid this by putting whatever code is causing this error in a function called once the page is loaded, using the jQuery.ready function:
<script>
jQuery.ready(function() {
// put your code here, instead of just inside <script> tags directly
});
</script>