iframe/Object onchange from dropdown

Question

I have an <object> element in a page that embeds another page, with an iframe fallback as recommended here: http://www.kgsteely.com/information-technology/using--lt-object-gt--instead-of---lt-iframe-gt.19.html

I am looking to use a dropdown with jquery to change the elements if selected. I got the iframe to ork, but I have not gotten the object to work. What am I doing wrong with my javasctript selector to make this work?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
<select id="selector">
        <option value="0">Select Project</option>
        <option value="http://google.com">Google</option>
        <option value="http://yahoo.com">Yahoo</option>
        <option value="http://codecanyon.net">CodeCanyon</option>
    </select>
    <!--[if !IE]>-->
       <object data="//themeforest.net" type="text/html" style="width:100%;height:50em;" class="viewer" id="viewer">
          <p>Sorry. This content cannot be rendered (non-IE object).  Stop living in the past and upgrade to <a href="http://www.abetterbrowser.com">a better browser</a></p>
       </object>
    <!--<![endif]-->

    <!--[if IE]>
      <iframe src="//themeforest.net" type="text/html" style="width:100%;height:50em; border: 0" class="viewer" id="viewer">
         <p>Sorry. This content cannot be rendered (IE iframe).  Stop living in the past and upgrade to <a href="http://www.abetterbrowser.com">a better browser</a></p>
      </iframe>
    <![endif]-->
    <script>
    $(document).ready(function(){
        $("#selector").change(function(){
            $("#viewer").attr("src", $(this).val());
        });
        $("#selector").change(function(){
            $("#viewer").attr("data", $(this).val());
        });
    });
    </script>

Thanks

score 1 · Answer 1 · answered Jun 16 '14 at 14:13

1

Try to replace:

$(document).ready(function(){
    $("#selector").change(function(){
        $("#viewer").attr("src", $(this).val());
    });
    $("#selector").change(function(){
        $("#viewer").attr("data", $(this).val());
    });
});

To this:

$(document).ready(function(){
    $("#selector").change(function(){
        $("#viewer").prop("src", $(this).val()).prop("data", $(this).val());
    });
});

answered Jun 16 '14 at 14:13

Tarmo Saluste

585
6
18

this method is def better – Rizzo Jun 16 '14 at 14:45
I've had problems with attr() myself as it sometimes gives errors or not sets the attribute. prop() is new and works better – Tarmo Saluste Jun 16 '14 at 14:51

score 1 · Accepted Answer · edited May 23 '17 at 11:57

Your selector works perfectly fine. If you check chrome's error log, you can see:

Refused to display 'http://themeforest.net/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

The same is true (or X-Frame-Options is set to DENY instead of SAMEORIGIN) for the other pages you're trying to embed in a frame. Ultimately, if you're trying to frame your own pages, I wouldn't recommend it but check out this answer if you really want to do it.

The comment on the linked question should also be taken into account: "If they're your pages, then remove the frame limiter. Otherwise, respect the page's author's wishes and DON'T FRAME THEM."

iframe/Object onchange from dropdown

2 Answers2