jQuery Forum

Hi there,

From inside the iframe you can call:

1. $(function () {
2.       alert($("*").length);
   
3. });

Hope it helps,
Superficial.

i must use it outside the iframe this is what i wrote

<iframe src="http://mysite.com/testing.php?id=7632762" id="myframe"></iframe>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
function count_li()
{
    var n1,n2;
    n1=document.getElementById("myframe");
    n2=n1.getElementsByTagName("li");
    document.write(n2.length);
}
$(document).ready(count_li());
</script>

it always gives me zero . . .
Can u please tell me what is wrong ?

This is not working . . .
Can i use getElementsByTagName() or getElementsById() while using iframe ??
Any1 reply pls

Try Following code.

<script>
function count_li()
{
    var n1,n2;
    n1=document.getElementById("myframe").contentWindow.document;
    n2=n1.getElementsByTagName("li");
    document.write(n2.length);
}
$(document).ready(count_li());
</script> 

Hi there,

You can't execute scripts from one domain in a second domain, JavaScript is bound by the "same domain policy" of the browser.

You can use function like getElementsByTagName() and such when you have an iframe, but you can't change content from another domain in an iframe i think.

If you are loading both the containing HTML file and the iframe from the same domain, you can make a function in the iframe that calls a function in the top window.
For example say you have a function that accepts a number in the containing HTML file to which you can send the number of nodes:

1. function acceptNumberOfNodes (nr) {
2.       alert("number of nodes in the iframe = " + nr);
   
3. }

Than you could call it from the iframe like so:

1. $(function () {
2.       if (top.acceptNumberOfNodes) {
   
3.             top.acceptNumberOfNodes($("*").length);   
   
4.       }
   
5. })

Hope it helps,
Superficial.

My main requirement is to resize the iframe, I tried many number of scripts available on the internet but none of them worked properly.The source in the iframe comprises fully of <li> tags [the data is displayed as list], what i thought is may be i can count the <li> tags and multiple the number with some amount to get the actual height of the iframe so that no scroll bar is shown along the vertical side.
I thought of another approach like first i want to load the data into object[I dont know how to do it. . .,(like php DOM something like $obj_frame= new DOMDocument; $obj_frame->loadHTML("src url");)] and then count the number of <li> tags and calculate the height of the frame and then display it.

How to do that because the page is load dynamically(its the output of some php file.) ?

IF you have control of iframe page then Superficial approach should work.

yup i got control over the page what i load into the iframe but i got no idea how to make it work for a dynamically loading php file
I used this normal script
<script>
function count_li()
{
    var n1,n2;
    n1=document.getElementById("myframe");
    n2=n1.getElementsByTagName("li");
    document.write(n2.length);
}
$(document).ready(count_li());
</script> 
inside the php file but it did not work. . .
the structure of the files is like this->

mysite.com/emd_dyn.php?key=bfdsbd23239mkf

the emb_dyn.php only contains the php code to interact with the mysql and some other php code and it has no echo html statements at the bottom of this file i include another php file say
include('emb_dyn_ht.php');
The emb_dyn_ht.php file contains the actual html echo statements and the actual html starts in this file i included the javascript here aznd it returned nothing but this script worked for static pages where the design is predefined with all tags not changing.

I am not able to understand the code given by superficial,I am a newbie to jquery and javascripts

1. function acceptNumberOfNodes (nr) {
2.       alert("number of nodes in the iframe = " + nr);
   
3. }

1. $(function () {
2.       if (top.acceptNumberOfNodes) {
   
3.             top.acceptNumberOfNodes($("*").length);   
   
4.       }
   
5. })

The 1st part of the code is fine with me i did not understand why he used "top." thing can u please explain.

-Thank you guys for replying... :)

hi again
the below script works fine when i point to the url :-mysite.com/emd_dyn.php?key=bfdsbd23239mkf
I wrote this script in my 'emb_dyn_ht.php [where all the html-php is present].This script is working fine ! :)
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(doc_size());
function doc_size()
{
    var doc_ht = $(document).height();
    document.write("<br/>The doc height is: "+doc_ht+"<br/>");
}
</script>

But i want to call this function from the client side so i followed ur instruction and i modified the script as follows

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
//$(document).ready(doc_size());
function doc_size()
{
    var doc_ht = $(document).height();
    //document.write("<br/>The doc height is: "+doc_ht+"<br/>");
     return doc_ht;
}
</script>

and on the client side i used this script.

<iframe id="myframe" name="myframe" style="width:100%;" src="mysite.com/emd_dyn.php?key=bfdsbd23239mkf" onload="docht_size()">
</iframe>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    function docht_size() {
          if (top.doc_size) {
                var doc_ht = top.doc_size(); 
                document.write("<br/>The doc height is: "+doc_ht+"<br/>");
          }
    }
</script>

I did not get any output for the height of the document.

-Thank you.

I am working offline and the iframe is not on the server side, the iframe code must be formatted well and given to the users to use it on sites/forums for embedding.
Can i make something like <script src="mysite.com/emd_dyn.php?key=bfdsbd23239mkf"></script>
and when users use the above script the iframe must be embedded, this would be easy if i formatted the html output from the php file to javascript compatible one. So that i can display the code using document.write('').
Since the iframe code is on the client side we cannot use top.function() to call the function present on the server.

Is there any opensource code to convert the generated html to be compatible with document.write("")
like if we give something like <div class="mystyle"></div> it must be converted to <div class=\"mystyle"\></div>.
A '\' must be added before special characters.

-Thank you

Hi, again I am able to display the iframe perfectly now with its full height.Is their a way to make this iframe code [What i give to clients] more compact ?
And I got another situation now ->I got to html docs and one of them i want to display in a frame .Lets say 1.html and 2.html [The doc i want to display in a frame.]
I want to call a function in 1.html from 2.html using "top.", but i must do it only after 1.html has completed loading.
How to find that 1.html has completed loading ??

- Thank you