Add CSS to an iframe inside an iframe wihout ID using Javascript - javascript

I have this iframe inside an iframe. Both of this iframe has no ID. The code looks like this:
<div id="Test">
<iframe>
<iframe>
<head>
<style>*CSS code right here*</style>
</head>
<body>
</body>
</iframe>
</iframe>
</div>
Could i add some CSS on the 2nd iframe using javascript?


To fetch the next iframe try this..
$(document).ready(function(){
$("iframe").next(iframe).css({"color": "red"});});

Related

how can i use javascript to remove iframe's html tag?

I want to remove iframe's content but keep the "iframe tag" unchanged
like:
<iframe>
<html>
...
</html>
</iframe>
change to
<iframe>
</iframe>
I tried this:
var frame_node = document.getElementsByTagName("iframe")[0];
frame_node.removeChild(frame_node.firstChild);
But I got an error: frame_node.firstChild is not an object
So how to do this?
thx
got the answer:
document.getElementsByTagName("iframe")[0].contentWindow.doc‌​ument.getElementsByT‌​agName("html")[0].re‌​move();

Accessing inner tags data which has no class or id from outer tag

This is the html i have:
<iframe id="edit-resp398__ifr" frameborder="0" src="javascript:""">
<!DOCTYPE >
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<body id="tinymce" class="mceContentBody " spellcheck="false" dir="ltr">
<p>I want to Access this</p>
<p>And also this..</p>
</body>
</html>
</iframe>
I only have an id of the iframe which is different for all iframes, the id and class of body stays the same for all the iframes. i want to access the material that is in a particular text area using iframe id. In short, i want to access the body of iframe using iframe id.. How can i do that using jquery?

If the contents of the iframe is from the same domain you can access it by:
$('#edit-resp398__ifr').contents().find(selector)...

You can try something like
$('#edit-resp398__ifr').find('p:first').text()
More about jQuery selectors here http://api.jquery.com/category/selectors/

Main web document vs iframe script

So i have this problem: I have an input in an iframe with some text in it and another input outside the iframe,in the page body which is empty. What I need is to copy the text in the iframe input to the other input.
How can I do this?
Example code:
<html>
<head>
</head>
<body>
<input id="outside-input" type="text"/>
<iframe>
<input id="inside-input" type="text"/>
</iframe>
</body>
</html>
I don't see how this would be rellevant but the iframe is in fact the Wordpress media upload pop-up.

If iframe is on same domain, you can access its content like this:
$('#outside-input').val($("iFrame").contents().find("#inside-input").val());

AFAIK you cannot access the content of the IFrame from your main page directly using JQuery / other JS.

Iframe without src - Can I do it?

I'd like to make another "context" into my html page. Such as a page loaded by iframe. Now, what I'd like to do is use this iframe but without src.
Somethings like :
<iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:300px; height:20px;">
<html>
<head></head>
<body>
<div>
Hello World
</div>
</body>
</html>
</iframe>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
I need this because I wont use ajax and I need a load a script that could make some problems in the same page-context (as I wrote yesterday on SO).

It seems that this is impossible :(, the only way to create a separate html file.
Source: http://stackprogramer.com/7276457/is-it-possible-to-create-iframe-without-src-but-with-my-html

Targeting html elements pulled in externally from iframe with css

Is there a way to target an HTML element that is being pulled in dynamically via an iframe. I have an example below to illustrate what I would like to do:
<html>
<body>
<iframe>
<html>
<body>
<a id="id">I want to target this element</a>
</body>
</html>
</iframe>
</body>
</html>
#id{display:none;}
Note: I am open to use javascript or similar to target this element. Accessing the content from the source is not an option.

Categories

Resources