Displaying a part of DIV in iframe

Question

I am using HTML object in below manner

<object id="foo" name="foo" type="text/html" data="mypage.aspx"> </object>

Now, I don't want to display complete data in mypage.aspx in HTML object/iframe. I just want to display a DIV layer from mypage.aspx in current page (default.aspx). I tried using data="mypage.aspx#div1" but didn't work.

For testing purpose mypage.aspx consists of

<body>
<div id="div1">This has to be displayed</div>
<div id="div2">This should not be displayed</div>
This portion also should not be displayed
</body>

How can I display only DIV1 part of mypage.aspx in HTML object?

You could use ajax to grab the contents of the the div instead of using an iframe. Is there a reason for using the iframe other than to get the content of that one div? — mowwwalker, Jan 25 '12 at 16:51
@Walkerneo - No strict reason. I just found using iframe is bit easy. If you have an answer with AJAX or any other please post it. I just need to implement it and does't matter what technology I use. — Mad coder., Jan 25 '12 at 16:55

ShankarSangoli · Accepted Answer · 2012-01-25T17:10:45.457

3

If you can get rid of using object or iframe you can use jQuery load method to just get the required mark up from mypage.aspx. Keep a container in your parent page which will hold the required content from mypage.aspx and try this.

$(function(){
   //Here container is a div in which #div1 from mypage.aspx will be loaded.
   $('#container').load('mypage.aspx #div1');
});

If you want to read about Loading Page Fragments using jQuery take a look at this link

edited Jan 25 '12 at 17:10

answered Jan 25 '12 at 16:59

ShankarSangoli

69,612
13
93
124

When I use something like this `

I need this in container
– Mad coder. Jan 25 '12 at 17:47
Thanks! this worked. Sorry I am a newbie to jQuery. Couldn't understand easily. Now, I got it working :) Thanks again. – Mad coder. Jan 25 '12 at 18:18
@Madcoder. - Welcome to IE hell, it has issue with `load` method http://stackoverflow.com/questions/1061525/jquerys-load-not-working-in-ie-but-fine-in-firefox-chrome-and-safari – ShankarSangoli Jan 25 '12 at 18:40
I have seen that link before and couldn't understand :) I posted another if you can answer. You are welcomed. http://stackoverflow.com/questions/9008350/my-jquery-code-not-working-in-ie – Mad coder. Jan 25 '12 at 18:45

user17753 · Answer 2 · 2012-01-25T19:10:32.530

I don't have an aspx capable server. So I tested using plain html, but the principle is the same really.

I recreated test.html:

<body>
<div id="div1">This has to be displayed</div>
<div id="div2">This should not be displayed</div>
This portion also should not be displayed
</body>

Then I made test2.html and for simplicity I embedded the JavaScript in test2.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Test</title>
    <script language="javascript"type="text/javascript">

    function init() {

        var obj = document.getElementById("foo"); // Grab the frame element

        var kids = obj.contentDocument.body.childNodes; // Grab all child nodes of the body node of fram element

        for( var i = 0; i < kids.length; i++ ) { // iterate through all child nodes
            if( kids[i].id == "div1" ) { // if child node's id is "div1"
                alert(kids[i].firstChild.nodeValue); // alert the first child of the div, e.g. text node, value
            }
        }
    }

    window.onload = init;

    </script>

</head>

<body>
    <object id="foo" name="foo" type="text/html" data="test.html"> </object>
</body>
</html>

This approach seemed the most cross-browser compatible naked javascript I could create. I'm not claiming that it's the best possible solution, though.

Here's some additional things you can do, I wrote comments for each. I commented one of the lines out because it makes a dramatic change I'm not sure you'd like. You can try it, though.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Test</title>
    <script language="javascript"type="text/javascript">

    function init() {

        var myDiv = document.createElement("div");  //create a new div
        myDiv.innerHTML = "<strong>Testing!</strong>"; // add some HTML to myDiv

        var obj = document.getElementById("foo"); // Grab the frame element

        var kids = obj.contentDocument.body.childNodes; // Grab all child nodes of the body node of fram element

        for( var i = 0; i < kids.length; i++ ) { // iterate through all child nodes
            if( kids[i].id == "div1" ) { // if child node's id is "div1"
                kids[i].firstChild.nodeValue = "sts"; // change first text node to sts
                kids[i].appendChild( myDiv ); //append myDiv to Div1

                document.getElementById("container").innerHTML = kids[i].firstChild.nodeValue; // add text to container

                //document.getElementById("container").appendChild(kids[i]); // actually append, or insert div1 into container2, this should move the div1 out of the frame and into the document


            }
        }


    }



    window.onload = init;

    </script>

</head>

<body>
    <object id="foo" name="foo" type="text/html" data="test.html"> </object>
    <div id="container"></div>

    <div id="container2"></div>
</body>
</html>

Can you please be more specific. How can I add data to a DIV in current page instead of creating an alert? I tried `document.getElementById("container").innerHTML == kids[i].firstChild.nodeValue;` But this didn't work. — Mad coder., Jan 25 '12 at 18:36
Uh, well in your code you list a double equals, or equality operator instead of assignment. — user17753, Jan 25 '12 at 19:05
If you change the == to = it should work. I added more to my answer to show you other things you can do as well. — user17753, Jan 25 '12 at 19:11

Displaying a part of DIV in iframe

2 Answers2