Modifying iframe URL with jQuery

Question

How can I modify the URL of an iframe, if it contains the youtube.com text?

I want to append:

&wmode=Opaque

to it, but only if this argument doesn't already exist;

Tried:

$('iframe[src*=youtube.com]').attr('src',
   $(this).attr('src') + '&amp;wmode=Opaque');`

but I get an error:

Uncaught Error: Syntax error, unrecognized expression: [src*=youtube.com]

ok, I found out:

$('iframe[src*="youtube.com"]').each(function(){
  this.src += '&wmode=Opaque';
});

You get a syntax error because you need to quote the value: src*='youtube.com'. — alexn
– alexn, Commented Jan 22, 2012 at 13:02
With your last code you add '&wmode=Opaque' to the URL even if that param already exists. — Fabio Buda
– Fabio Buda, Commented Jan 22, 2012 at 13:15
you are right, do you know how can I check if it exists? is there some strpos function in javascript? — Alex
– Alex, Commented Jan 22, 2012 at 14:41

Joep · Accepted Answer · 2012-01-22 13:05:15Z

1

According to the jQuery API you want to do this:

$('iframe[src*=youtube.com]').attr('src',$(this).attr('src') + '&amp;wmode=Opaque');
$('iframe[src*="youtube.com"]').attr('src',$(this).attr('src') + '&amp;wmode=Opaque');

Note the double quotes around 'youtube.com'.

answered Jan 22, 2012 at 13:05

Joep

6513 silver badges10 bronze badges

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

Comments

Luca Borrione · Accepted Answer · 2012-01-22 17:00:13Z

I would do it in this way:

<script type="text/javascript">

    function $_GET(key, src)
    {
        var re = new RegExp('[&|?]'+ key +'=([^&]*)','i');
        return (src = src.replace(/^\?/,'&').match(re)) ? src=src[1] : src='';
    }

    function appendToIframe(id, key, value)
    {
        var iframe = document.getElementById(id);
        var src = iframe.src;

        // Append desired key and value if key doesn't exist
        if (!$_GET(key, src))
        {
            var glue = (src.indexOf('?') == -1) ? '?' : '&';
            src += glue + key +'='+ value
        }

        iframe.src = src;           
    }


    </script>

<iframe src="your_url" id="iframeID"></iframe>

<a href="#" onclick="appendToIframe('iframeID', 'wmode', 'Opaque'); return false;">APPEND</a>

Just change src and id of the iframe tag as desired, and then use the function appendToIframe to append a new couple of key and value to the iframe URL only if key is not already present.

Please note that jQuery is not needed for that.

Collectives™ on Stack Overflow

Modifying iframe URL with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related