I want to select all DIVs in my page, including its child iframe.
I have two DIVs here but whenever i try and select them it only grabs the outer one.
<html>
<head></head>
<body>
<div class='xx'>blah</div>
<iframe id='x'>
<html>
<head></head>
<body>
<div class='xx'>blah2</div>
</body>
</html>
</iframe>
</body>
</html>
Is there any way for me to get both DIVs back?
var a = $('.xx');
alert(a.length); //only gives me 1 :(
My fiddle is here :
http://jsfiddle.net/7kvFw/
With only one call this is not possible at all. The iframe is another document so it is not accessable directly. You need to search in all frames seperatly.
By the way your example is not valid. A iframe is just a referece to another document you cannot put the content in the same html document. If you just care about a "box" with the option to scroll inside, just add the another div with the ablity to scroll. This would also allow you to get all .xx elements at once.
See also this fiddle.
Related
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).
I am currently working on code where when a user clicks a button it displays a frame from another webpage using the HTML <iframe> tag using JavaScript.
Below is the code that I use to display to the webpage:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("p").text('<iframe src="webpage.html" width="450" height="475" style="overflow:hidden"></iframe>');
</script>
<p></p>
</html>
Result:
<iframe src="webpage.html" width="450" height="475" style="overflow:hidden"></iframe>
Sadly it just simply prints out the text without actually retrieving the frame. Is there any problem with how I am outputting the text or am I completely using the wrong function?
I have tried...
Removing the quotations ('...') around the tag
Resulted In...
The webpage being useless
Use html in the place of text...
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("p").html('<iframe src="webpage.html" width="450" height="475" style="overflow:hidden"></iframe>');
</script>
<p></p>
</html>
beware that text and html have different functionality :
Text() : it replaces the text inside the html div or class specified but
but not the html
html() : it replaces the specified dom of html div/class ,or to be more specific
the function called returns or set the content (returning an innerHtml),
when you use to return content, it return the first matches,
if not it overwrites the content of all matched elements.
I've been struggling with this one for a few hours now.
I am trying to attach click listeners to elements within an iframe with no src attribute. The entire page is basically inside that bad boy.
When I use "inspect element", the body of iframe looks empty (dunno if that has to do with the fact it has no src attribute.
<iframe id="CoverIframe" name="CoverIframe">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
When I enter the ID of the iframe in the console, it simply returns null, which prevents me from checking the elements it contains via contents().find() or anything else for that matter. I can only see its content (and by extension the elements on the page) by showing the source code (right click>see source).
Any thoughts on this? Is it because of the absence of src attribute? Any way I can get around it?
Thanks,
Alexis
As you noticed, you can't just set the innerDocument of an iframe like that.
However, you can use its (html-5 only)srcDoc attribute to set it,
<iframe id="CoverIframe" name="CoverIframe" srcdoc="
<html>
<head></head>
<body>hello</body>
</html>"
></iframe>
or use a data:text/html;charset=utf-8,<html><head></head><body>hello</body></html>".
<iframe id="CoverIframe" name="CoverIframe" src="data:text/html;charset=utf-8,<html>
<head></head>
<body>hello</body>
</html>"
></iframe>
But for the later, you will soon need to encodeURI() your page.
So the best is probably using javascript :
<script>
var yourHTML = "<html><head></head><body>hello</body></html>";
function loadFrame(e){e.contentDocument.write(yourHTML)};
</script>
<iframe id="CoverIframe" name="CoverIframe" onload="loadFrame(this)">
► Show code fiddle
I have say 6 aspx pages that I want to display within something like an Iframe so that when I look at the page I can see an array of controls that contain a web page.
But if I use an Iframe I cannot then size the content to the size of the Iframe although YouTube does resize the content so their must be a way to do so.
So, how would I go about making sure that the content fits the IFrame or is there a better way of doing this.
Also, ultimately I would like to go to the page if the control was clicked but I am not sure that the Iframe has a click event.
So, how would I go about doing that ?
If the contents of the iframe are on the same URL as the main page then you shouldn't have any security issues and you can add JavaScript to the content pages to pass the height of their content back to the main page. Same with click events: you can have some JavaScript call a function on the parent page.
Here's an example of a main and iframe content page. The content page has a button you can click that will resize the iframe based on the height of the content.
main.htm
<html>
<head>
<script type="text/javascript">
function resize1(h) {
document.getElementById("iframe1").height = h + 50;
}
</script>
</head>
<body>
<div>Test</div>
<iframe id="iframe1" border="1" height="100" src="iframe.htm" width="200">
</body>
iframe.htm
<html>
<body>
Resize iframe
<div id="content" style="background:Red;height:500;width:50px;">
Test content
</div>
</body>
You could adapt this to suit your needs. For example, the height could be set as soon as the iframe content loads by calling the function in the onload event of the iframe content page.
Note that any JavaScript functions you want to call on the main page must be in the HEAD section.
I'm not sure if this is even possible.
I've got the following code;
<iframe src="http://www.domain.com/content.html" width="200" height="50"></iframe>
Now, I would have assumed that would've hyper-linked the entire iFrame area, however it only hyperlinks the border.
Is it possible to hyperlink the entire iframe area?
no, that's not valid. you can't even reliably get a click event off of the element containing the iframe.
e.g.,
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bob').click(function(e){
alert('hi');
});
});
</script>
</head>
<body>
<div id="bob" style="padding:100px;background:red;"><iframe src="http://www.google.com"></iframe></div>
</body>
</html>
notice that if you click the iframe, no alert fires - but if you click anywhere else (in red), it will. if this were otherwise, there'd be abuse...
What actually do you mean by "hyperlink the iframe"?
You could try to use an onclick event for the iframe, or position a div with an onclick and transparent background above the iframe. Another possibility is to set the a to display: block and position it above the iframe.