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

Question

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>

@ScottSelby - Explain, $(this) in that context is <a>. jsfiddle.net/cCs3n — Gabe
– Gabe, Commented Jun 11, 2013 at 15:29
@ScottSelby How. $(this) refers to the anchor in this case. — Django Johnson
– Django Johnson, Commented Jun 11, 2013 at 17:04
@MisterMelancholy I thought iFrames were deprecated in HTML 5 — Django Johnson
– Django Johnson, Commented Jun 11, 2013 at 17:04

vcarel · Accepted Answer · 2013-06-11 15:43:24Z

1

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/

answered Jun 11, 2013 at 15:43

vcarel

1,8221 gold badge18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Django Johnson Over a year ago

I chose an object tag because I though <iframe> was deprecated in HTML5. In other words, no longer supposed to be used or supported.

Django Johnson Over a year ago

I can't sue pagepeeker because they have to be live not screenshots.

user1846065 Over a year ago

Iframes are not depricated in HTML5, but the original frame tag is.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related