I read that the following should work in order to access the contents of an iframe with javascript:
document.getElementById("iframe_name").contentDocument
or
document.getElementyById("iframe_name").contentWindow.document
However, neither of those methods work for me. The iframe I am trying to access is a Google form that I created. It is a registration form that I created for my website. I want to do some calculation on some of the fields that the user types in then display it after the iframe. Accessing those fields using javascript is the best way I could think of. Why can't I access it? Is there maybe a better way to achieve my goal? Thank you.
You can't acces external page like google.com from your server.
What you have is correct. Here is a more complete sequence that should work cross-browser:
var ifr=document.getElementById("iframe_name");
var doc=ifr.contentWindow||ifr.contentDocument;
if (doc.document) doc=doc.document;
Update: as said in another answer, this won't work across domains (for example if you try to access google.com from mydomain.com).
I don't know what you wishing to do but maybe this will help you..
I used this to reload the frame
document.getElementById('graphFrame').contentDocument.location.reload(true);
you can see that the location attribute is related to the iframe.
Next, I am changing a div inside an Iframe like this.
top.frames["graphFrame"].document.getElementById('right_example');
So the top.frames is array of the page frames. then i am searching for a dom element which his ID is "right_example" then you can do what ever you want with that.
Related
I am currently trying to create a chrome extension that alters a website (an interface for a ip camera that I bought, thats also why the site is a local site like 192.168.178.70 for example).
I just want to add some buttons and stuff like that to add some functionality.
I used
document.body.onload
to wait until everything has loaded so I can grab a table or a div or whatever and create and add my button to it.
But document.getElementById("ipcam_wrapper") does not seem to work properly, it returns null.
Well I tried to do the same thing in google chrome developer mode but it does also return null. I actually managed to get the element this way once but I am not able to recreate it because I did not do anything different.
There is only one element with that specific ID.
Here i try to get the element:
So what am I doing wrong?
best regards
Thanks to Nisarg Shah, I was able to resolve my issue.
Thank you very much for your help!
The issue was that the element I was trying to access was inside an iframe.
Also thank you RaYell for providing the necessary code, with which I was able to resolve my problem:
window.frames['mainframe'].document.getElementById('example')
I think it's because the document itself won't be loaded yet.
I fixed it by using window.onload instead of document.body.onload, like:
window.addEventListener("load", ev => {
// it should work
document.getElementById("ipcam_wrapper")
});
I've been looking everywhere and I can't seem to find exactly what I'm looking for, I'm starting to think I should be looking at some kind of Javascript?
Basically, I have an amount £1,000,000 displayed over an image button and I need this repeated on a different page (The page the button leads to).
As I've never done this before I'm not sure where to look or what I need to be looking at as I'm a novice in this area.
Any help would be appreciated.
If the value is static so you can use content css property :
https://developer.mozilla.org/fr/docs/Web/CSS/content
If the amount is dynamic you should pass variable through Url or via form.
As I don't have a clue as to what you're setup is, i'll make some assumptions:
a static HTML site
no javascript frameworks (so no jQuery or jqLite etc)
with these assumptions you should start by looking up url attributes as a way to communicate basic information between pages.
As an example, the button href should look something like this:
/link-to-page?amount=1000000
then you grab the amount on the new page - with javascript - looking in the window.location object
This is a good resource
I have 2 questions regarding MSCRM2011 Iframe manipulation by javascript:
How can I filter a MSCRM2011 Iframe records using js? what I actually mean is having the Iframe display only records that meet some criteria.
(I know that it's possible to have this kind of filtering action while setting different filtered views through the Form customization page)
Is it possible to set the current Iframe view on a form, by js code?
Thanks in advance,
Ofer
1a) To pass information to an iFrame you can do so via parameters in the URL. If you need to pass information back and forth, you need to do so using postMessage.
1b) Before going down the iFrame route, look at embedded grids.
2) Absolutely; however, with CRM 2011 you can place the iframe and just change the source. It's really about personal preference.
If you want to inject it dynamically, you'll need to know the HTML you want to inject. Something like:
<iframe src='www.google.com'></iframe>
Then set the Html of an item on the page to the iframe html code.
If you are wanting to piggy back the iFrame control (which is what I'd recommend in CRM 2011), then look to use:
Xrm.Page.ui.controls.get('IFRAME_opp').getObject()
Here are some examples of working with iFrames that might help you (granted one is 4.0 but will relate if you are injecting):
http://blog.customereffective.com/blog/2011/07/adding-a-loading-screen-to-your-iframe.html
http://blog.customereffective.com/blog/2012/01/crm-2011-iframes-saving.html
I am trying to find a way to save all html content from a webpage to a variable. This should work even if the webpage has frames in it. By current best solution is:
javascript: alert(document.body.outerHTML);
Just paste the code into the control in your browser where the url is placed and push enter to see the result. Any idea how to do this?
You should cycle over all the frames and ajax-load the content.
Somethings like
document.getElementsByTagName('frame')[0].src
to get the source. But I strongly suggest you to use library to help you out. In jquery can be quite simple task. Cycle over all frames, than $.ajax request all the externals source and build it (replacing the relative section)
But, as pointed by smeg4brains, innerHTML can be your way.
Here is the direct answer to "how to do this":
Having this in the address bar just press Enter and you'll see the contents in alert dialog.
To see contents of frames you'll have to iterate them separately it won't be part of the HTML.
Does this work?
var copyOfHtml = document.documentElement.outerHTML
alert(copyOfHtml)
I'm facing a problem while working with iFrames. What I need to do is, get the contents of a division 'contents' , display it in an iframe, and then remove all forms/form elements ONLY in that iframe. When i use $("#form").remove(), it removes the form both in iframe and in the window. Can someone help?
Thank You.
You can wrap the iframe in a DIV with an ID and remove forms only inside of that. Can you post some code? Would be easier to work off that. Or just grab the iframe (although I'm not sure it will work, haven't tested it).
$("iframe").find("#form").remove();
Do both the forms have the same id (#form)?
Give them separate ids (eg: <form id="inner"> and <form id="outer">) and you should be able to target them individually: $(#inner).remove()
I don't know it in jQuery but I think that this in strait javascript might help you.
var forms = document.getElementById('iframe_id').getElementsByTag('form')
for (var form in forms) {
forms[form].parent.removeChild(forms[form])
}
Disclaimer: I havn't tested this code, but with some debugging it should work... eventually. I just put it here so you maybe can guess to what you need to to do.
Perhaps the jQuery (now I'm just guessing) that you need is something like:
$('iframe_id').('#form').remove()
Or maybe dlabaeb's code already posted.