Tiffany B. Brown

a mish-mosh of stuff

The type attribute, spaces and Opera browser

Debugging is part of my day job at Opera. Today, I stumbled across an issue related to white spaces and values for the HTML type attribute that affects Opera.

Take a look at the following code:

var d = 'test.js';
var s = document.createElement('script');
s.setAttribute("type", " text/javascript"); // note the leading space
s.src = d;
document.querySelector("body").appendChild(s);

That space between the " and text/javascript will cause Opera to fail. The script won’t load and or execute. Other browsers will handle that space with no problem, however. If you aren’t testing your site in Opera, you would miss this issue.

Keep in mind that this isn’t really a bug. It’s a difference in implementation. Opera is more strict about spaces in attributes than most browsers. The specification is either muddy or silent on this issue (depending on which version you consult). Yes, it’s something the development team is aware of and discussing internally. Yes, this also applies to the <script> tag.

In the meantime, make sure that you don’t include spaces at the beginning or end of the value of your type attributes.*

(Or leave it out if you’re using the HTML5 doctype.)

  • http://myfreeweb.ru/ MyFreeWeb

    Oh, you’re from Opera… Can you tell me, what’s the problem with Opera and JSONP? I’m redesigning my website at http://beta.myfreeweb.ru and it’s fully static, so I use JSONP for getting data from external services such as Pinboard and Last.fm. Everything’s great in WebKit browsers, the Firefox, but it just doesn’t load in Opera at all. (I’ve tried using it without head.js, just inserting a script tag using only Dragonfly’s REPL and standard DOM stuff, but it didn’t work anyway).

    Opera does a great job in HTML5 and CSS3, but the JavaScript engine sucks a lot.

    P.S. From the creator of RightJS: http://twitter.com/nemshilov/status/54221636362190849

  • Anonymous

    Can you email me (tiffany at webinista dot com) or post an example? I’ve never had a problem with JSONP and Opera, so I’m curious to investigate.

  • http://myfreeweb.ru/ MyFreeWeb

    Looks like it’s about asynchronous loading, not JSONP. My main script (index.js) is not loaded on http://beta.myfreeweb.ru in Opera, but everything’s fine with Firefox, Safari and Chrome. I guess I should contact the author of head.js…

  • Anonymous

    Actually, I think it’s a Right.js problem. Dragonfly (experimental build) is throwing the following error:

    Uncaught exception: TypeError: Cannot convert ‘$(‘wrapper’)’ to object

    Error thrown at line 13, column 0 in http://beta.myfreeweb.ru/media/js/index.js:
    lsd = $(‘wrapper’).find(‘section’).last().dimensions();

  • http://myfreeweb.ru/ MyFreeWeb

    I think it’s an Opera problem, because WebKit and Gecko do everything
    just fine. But I’ll look deeper in RightJS core source… probably a
    workaround for this is obvious.

    Thanks a lot for your attention :)

  • Anonymous

    I updated that last comment to correct myself.

    To be clear: it IS an Opera problem, but one that can be fixed by making sure the DOM is ready before calling index.js. It’s not related to right.js, but to the way you’re loading scripts with head.js.

    Try using head.ready() instead, or call head.js(‘index.js’) at the bottom of the page. (I did the latter in my tests and that worked.)

    Opera loads and executes things in a slightly different order than WebKit and Mozilla browsers do. To be on the safe side, any time you run a script that affects the DOM, you’ll want to make sure those DOM elements are available. Otherwise things break.

    Glad I could help :-)

  • http://myfreeweb.ru/ MyFreeWeb

    Thanks again!