How to change/add CSS inside of iframe by jQuery - javascript

I want to add css properties in a iframe div by using jQuery but it's not working.
Html Code:-
<html>
<body>
<iframe id='iframeId' src='api.php?abc=xyz..'>
<html>
<head></head>
<body>
<div class='change-class'> //require <div class='change-class' style='background-color:black'>
.......
</div>
</body>
</html>
</iframe>
</body>
</html>
JS Code:-
I try below code but doesn't get any result.
$('.change-class').css('background-color','black');
$("#iframeId").contents().find(".change-class").attr('style','background-color=black');

For this the iframe src document should also have to be on same domain to access iframe's dom nodes, if you have both pages on same domain then you can do this:
$("#iframeId").contents().find(".change-class").css('background-color', 'black');

You can find use like this way:
var iframe = $('iframe');
$(".change-class", iframe.contents()).addClass('border');

Related

How to get all nested iframes on document?

I found many related questions but none of them had a solution that worked for me, so apologies if this is a dupe.
I have the following HTML structure (simplified) :
<html>
<head>
</head>
<body style="">
<div>
<div>
<div>
<iframe>
<html>
<head></head>
<body>
<div></div>
<iframe>
<html>
<head></head>
<body>
<div>
<iframe src="about:blank">
<html>
<head></head>
<body>
<img />
<iframe id="some_random_id">
<html>
<head></head>
<body>
<div>
<!-- main content -->
</div>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</div>
</div>
</body>
</html>
And I would like to retrieve all the iframes, ideally in an array.
I have tried the following:
document.getElementsByTagName('iframe')
But that returns an array of size 1 : [iframe]
window.frames.length give me 1
I thought about doing something like :
var a = document.getElementsByTagName('iframe')[0]
var b = a.getElementsByTagName('iframe')[0]
// b is undefined
var b = a.contentDocument.getElementsByTagName('iframe')[0]
// b is undefined
Is there any way to retrieve all iframe on the page? Alternatively, just getting the last one (the one with the id some_random_id) would works as fine, but I can't use the id to select it since the html is created by a third party.
Edit: I don't think my question is a duplicate of using document.getElementsByTagName on a page with iFrames - elements inside the iframe are not being picked up
because the accepted answer in this question use:
for( j=0; j<m; j++) {
...
}
Where m is document.getElementsByTagName('iframe').length. But in my case it would have the value 1 and thus I couldn't access the nested iframes.
You are using the <iframe> tag absolutely wrong! You would like to read the documentation from <iframe> tag:
Permitted content: Fallback content, i.e. content that is normally not rendered, but that browsers not supporting the <iframe> element will render.
In other words the content between <iframe> and </iframe> tags will be rendered, if the browser do not support the <iframe> element.
You have two possibilities to use <iframe> tag:
In the src attribute from <iframe> tag you could write a path to HTML file.
In the src attribute from <iframe> tag you could write "about:blank" and then using JS you could add the content to this <iframe>.
If you want find some elements or manipulate the content from this iframes you could use the following code:
var iframe = document.getElementById('iframeId'),
innerDoc = iframe.contentDocument ? iframe.contentDocument
: iframe.contentWindow.document;
You should be sure that you have an access to your <iframe>.
Please read Cross-origin resource sharing (CORS) article about it.
If you want to get the count of all nested iframes on document you have to find it for each <iframe> separatelly and to add this count to your global iframe count variable. And do not forget about the CORS (see above).

get element by id from parent tag

My DOM is as below.
<html><head>...</head><body><script>...</script>
<iframe id="frame">
#document
<html>...</html> <!-- 2 -->
</iframe>
</body>
</html>
I am binding partial in iframe (i.e. html 2). In html_2 partial, I am calling document.ready to get id of iframe using getElementById, but I am getting null. How to get id and other attribute values of iframe?
I did this as below,
$("#iframe", parent.document).attr("id");
BTW, Thanks all who answered and helped me by valued comments.
$("iframe").each(function() {
alert($(this).attr("id"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>...</head>
<body>
<script>
...
</script>
<iframe id="frame">
</iframe>
<iframe id="frame1">
</iframe>
<iframe id="frame2">
</iframe>
</body>
</html>
Use .attr("id")
For multiple iframe use .each() to iterate iver all iframe
Use this to get current iframe
Try using this:
document.getElementById("frame").contentWindow.document.getElementById("div1")

How do I get a paragraph from a website and display it in an iframe?

I am trying to get the first paragraph from the website below and display it in an iframe.
Can you correct my code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var iframe = document.getElementById('iframe');
$(iframe).contents().find("<p>").html();
</script>
</head>
<body>
<iframe name="iframe" id="iframe" src="https://www.baronaonlinepoker.com/blog" scrolling="yes" width="180" height="135">
</iframe>
</body>
</html>
You'd be better to use a DIV and use XMLHTTPRequest to set the innerHTML
If the browser loads a page from x.com, that page can have a frame whose source is y.com, but the x.com code will not have access to the y.com DOM. This is a cross-domain issue. You can read more here: http://en.wikipedia.org/wiki/Same-origin_policy
Please see my answer here: https://stackoverflow.com/a/19100553/98706
because I think your going about achieving something the wrong way.

Accessing IFrame elment from external page loaded inside iFrame

I would like access the IFrame element available in the main page from the IFrame source page using JavaScript
Here is my main Page
<html>
<body>
<IFrame id="page-container" src="http://stackoverflow.com"
width="200px" height="200px">
</IFrame>
</body>
</html>
Child Page
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"/>
<script type="text/javascript" >
$(document).ready(function(){
var containerFrame= $('#page-container');
//var containerFrame=document.frames["page-container"];
//var containerFrame=document.frames["page-container"];
//var containerFrame=document.parent.frames["page-container"];
});
</script>
<body>
<div>some content..</div>
</body>
</html>
I am getting undefined for all my tries.
How it can be done? Is it possible?
Edit: I tried loading a cross domain page.
In IE i am getting error ' for security reason framing is not allowed' and also
domains, protocols and port must match. Can we achieve this any way?
var containerFrame = $('#page-container', window.parent.document)
This should firstly reference the parent of the window and then look for the iframe div
You need to specify the context to search for #page-container in, which in this case will be the parent window.
var containerFrame = $('#page-container', window.parent.document);

How to interact with <body> tag from iFrame

Say I have a code like this :
<html>
<head>
</head>
<body>
<iframe>
<script>
//execute javascript here to append another piece of javascript in parent body tag
</script>
</iframe>
</body>
</html>
Now I want to execute some javascript in that iFrame to append another piece of javascript in parent body tag.
If the iframe belongs to the same domain of the main window, you can simply do
top.functionToBeCalled(argument);

Categories