CODEWITHSUNDEEP
javascriptjqueryhtml
Django Johnson
Django Johnson

Reputation: 1449

setting <object>'s data attribute with javascript / jQuery

So, I am trying to display a webpage inside a div on click of a link to that webpage.

On click of the link, I prevent the browser from going to the link, show the div, and give the <object> inside the div the url of the link that was clicked.

This all works fine, the div shows, and the object gets the url of the clicked link as the value of its data attribute.

My problem is that the <object> is not displaying anything. According to dev tools it is there, but I don't see the webpage.

Here is my javascript / jQuery code:

$('a').click(function(event){
    event.preventDefault();
$('#tabViewWindow').show();
$('#tabViewWindow object').attr('data', $(this).attr('href'));
$('#tabVieWindow embed').attr('src', $(this).attr('href'));
});

and here is the full code of the file where the problem exists when I run it locally:

<!Doctype HTML>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Tab View</title>
    <style type="text/css">
    html, body{
        height:100%;
        width:100%;
        margin:0;
        padding:0;
    }
    #tabViewWindow{
        height:100%;
        height:100vh;
        width:100%;
        width:100vw;
        position:absolute;
        background:#000000;
        display:none;
        left:0;
        top:0;
        z-index:10000000000000000;
    }
    embed, object, iframe, img{
        max-width:100%;
        margin:0 auto;
        display:block;
    }
    object{
        height:100%;
        width:100%;
    }
    </style>
    </head>
    <body>
        <div id="tabViewWindow">
            <object data="">
                <embed src="" />
            </object>
        </div>
        <br />
        <br />
        <a href="http://wolfram.com">Wolfram.com</a>
        <br />
        <br />
        <a href="http://wikipedia.org">Wikipedia.org</a>
        <br />
        <br />
        <a href="http://google.com">Google.com</a>
        <br />
        <br />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
        $('a').click(function(event){
            event.preventDefault();
            $('#tabViewWindow').show();
            $('#tabViewWindow object').attr('data', $(this).attr('href'));
            $('#tabVieWindow embed').attr('src', $(this).attr('href'));
        });
        </script>
    </body>
</html>

Upvotes: 1

Views: 329

Answers (1)

vcarel
vcarel

Reputation: 1805

With an iFrame, it works (at least on FF and Chrome, latest) - see: http://jsfiddle.net/WSW9J/1/

<div id="tabViewWindow">
    <iframe></iframe>
</div>

Is there a reason why you want to use an object tag instead ?

By the way, if you just want to display a snippet of another website in your page, you may be interested in http://pagepeeker.com/

Upvotes: 1

Related Questions