This question already has answers here:
How to pick element inside iframe using document.getElementById
(6 answers)
Closed 5 years ago.
I am working with a website that uses different iframes on the same webpage. I am wondering how I can access and manipulate an iframe that I am not currently focused in on.
The website has a body that allows users to type in, and I want to use the method innerHTML (javascript) to set the value of text in the box. However, I'm having trouble accessing the iframe.
Here is the Javascript that I was trying to use, but it wasn't working as I intended.. getElementById is not a function of getElementsByTagName("iframe")
document.getElementsByTagName("iframe")[1].getElementById("tinymce").innerHTML="Hello, world!"
Here are the two iframes that I am working with:
I cannot inspect the page and change the iframe by hand, so that is not an answer I am looking for. Thank you for clearing things up for me!
EDIT:
As suggested, I try
document.getElementsByTagName("iframe")[1].document.getElementById("tinymce").innerHTML="Hello, world!"
However, I am still receiving an uncaught type error
The outer HTML does not have access to the IFRAME html. If you are intending to change the part of the HTML then probably iframe is not the correct solution.
However, you could pass a parameter to the iframe src which will cause the intended change.
EG.
if you have iframe whose background needs to be changed based on an action on the outer HTML:
<iframe id="example" src="https://example.com?background="></iframe>
you can change the background to blue by changing the src url with a parameter
document.getElementById('example').src = "https://example.com?background=blue";
And within the iframe site HTML you can parse the query parameter and change the background.
Related
This question already has answers here:
tools for obfuscating html and css [closed]
(2 answers)
Closed 6 years ago.
How to hide my HTML CSS JS source code and show some random characters when someone view the source by clicking the right button of mouse. I have given a link where the code is hidden and some characters have been shown. I have also attached an image for better understanding.
view-source:https://devitems.com/html/reflex-preview/reflex/index-3.html
You can first encode all your script content using encodeURI native browser function.
Inject to the page as plain text or local variable value
Then decode using decodeURI function
inject result into the page using document.write(decodedContent)
As I mentioned in my comment, there is simply no way to hide html, css or javascript. The example you have shown above it not hiding or encrypting anything. All you have to do, to get the 'real' html markup, is using for example PHP's urldecode function. Also, there is no reason to do so. If you have something, that no one should see, dont put it on the client side.
You can see its result here: http://pastebin.com/eZZTUNYA
Formatted version: http://pastebin.com/Gzg7jxT6
Short said: Dont even try to hide content. You cant.
If you still want to do, what your example did, you can do it with PHP as I said or in JavaScript directly. A PHP version would be:
$html = 'YOUR HTML CODE';
print urlencode($html);
Keep in mind, that because JavaScript has to decode it every time, it can cause higher loading times.
I was doing an innerHTML on a div element. MY lead comes and tells me that innerHTML and iFrame are both the same. Now this one was something new. I always thought InnerHTML to be different from iFrame.
[My lead]: "The issue is because he is trying to use innerHTML which
in turn is called as IFRAME for a browser"
I wanted to know the differences between an iFrame and innerHTML. Are they both essentially similar in nature? I looked but couldn't find much.
Thanks
Sounds like a communication error--e.g., if your lead means that the innerHTML of that div is just going to show an iframe as its innerHTML (or otherwise, it would sound like you need a new lead). innerHTML grabs the HTML code as a string inside of the selected element. An iframe is an element used for transcluding content (usually from other sites or other pages on your own site). Apples and oranges...
They're very different. An iframe tells the browser to load a different URL in the iframe, and it will often have it's own scrolls. But a div can be made to look and work like an iframe by setting
overflow: auto
- in the style. Maybe that's what he meant.
iframe is an HTML tag used for displaying another website or page on your page, innerHTML is used in Javascript to change the content of an element on your webpage.
They are completely different.
They are not the same. Innerhtml is a way to access the contained html of an html element. An iframe is an element that let's you display content from a different web page than the one you're currently on.
This question already has answers here:
Override body style for content in an iframe
(11 answers)
Closed 9 years ago.
I do have an iframe inside my webpage, but i want to change the css / font styles etc.
<iframe name='iframe1' id="iframe1" src='<?php echo "http://micro.shoretel.com/www/?v=$version&s=$style&l=$logo&p=" . $_GET["p"] ?>' frameborder='0' width='660' height='450'></iframe>
How do i override the CSS style of the iframe's content?
If the iframe loads a page on your own domain, and you want to statically change the iframes styles, you could just change the style rules in the CSS file, this is what #Justin808 is referring to.
However if you want to dynamically change the styles, and the iframe loads a page on your own domain, you could do this using jQuery:
$("iframe").contents().find("element-selector").css("border-color", "blue");
If the iframe loads a page on another domain, you're out of luck, follow this link, where you can read up a bit on why that doesn't work.
If you're using HTML5, you can use postMessage to communicate between the page and the iframe.
#crdunst's solution will work if you have "editing access" to the page inside the iframe so that you can edit it to understand the parameters which are passed to it, and then make it act upon those parameters. It is not as dynamic as using jQuery as it only allows you to change styles by reloading the page inside the iframe and passing it another set of parameters.
I'm not sure if this is what user2146515 is referring to, but if you have access to the page within the iframe, you could pass values on the url, and then use those values within your iframe content:
<iframe src="http://www.youriframecontent.com?bg=ffffff&text=000000"></iframe>
Then within the iframe page, check for the value and add styles based on those values
This question already has an answer here:
Closed 11 years ago.
Possible Duplicate:
Getting contents of iframe
Javascript: I need two examples.
Get content of loaded iframe which src is not on same server as parent page.
Get content of loaded iframe which src is ON the same server as parent page.
By content I mean InnerTEXT or innerHTML, or anything. Goal is to transfer variable from one page that is not on same server to other. This was my first thought. If there is any other way to transfer variable within javascript.
Sounds like homework. What have you tried so far? Are you allowed to use jQuery? Show us your examples.
EDIT:
Since you are allowed to use jQuery try going down this path for your solutions:
$('#iframe').contents().find('input').val();
It is not possible to transfer a variable from another website. But you can call functions which are defined in parent.
You make this function on your main site:
function helloWorld(text) {
alert(text);
}
And you call from inside of the iFrame with parent.helloWorld('hiho!');. This should work with the same or any different domain, but you need to access the different page, to add the method call!
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a way to have content from an IFRAME overflow onto the parent frame?
Here is my issue:
I have two types of dialog which (should) look and act the same. One loads content directly into the page, and one uses a iframe to load content. I have an element which I need to overflow out of the iframe and show completely on the page. This element is basically an enhanced select element built with a list (ul/li). How can I make this act as a select would inside an iframe and overflow the iframe?
The first thing that comes to mind is to put the select/list outside of the iframe and position it in the correct spot, though this will require communicating between the iframe and parent more than I would like. Ideally I'd like a solution that keeps the select/list in the iframe.
You can't.
An <iframe> is an element containing a separate, distinct browser window (essentially).
Think of it literally like a window: when you look out of your window, the view of the outside stops at the windowframe.
This is in contrast to content inside, say, a scrollable <div>, which is more like a hand-held sheet of glass with some stuff painted on it and some other stuff stuck on with sellotape and hanging off over the edges.
You could use php to load the page into your current page. A lot of people consider iframes bad practice. It would only take a couple lines of php to load the page elements, instead of an iframe, which is sometimes slower.
Here is how you would do it....
<?php
include('file.html');
?>
You would put this line in a and contain it on the page just as you would with the iframe. You can use ajax/js to seamlessly change the content of the html and even load things from a server if you wish.
Imagine that the document is a picture.
Imagine that the iFrame is a real frame.
Could you make the picture come out of the frame? No.
It's exactly the same thing here.
Your best bet is to figure out a way to avoid the iFrame.
Besides, iFrames are bad practice.