JavaScript Onclick window.open will not work properly in IE

Question

I hope my question is one that is simple to answer, but unfortunately I don't have a great knowledge of javascript. I've spend a good portion of the day Googling the issue and trying various workarounds, but nothing has worked adequately thus far.

I am running a very simple piece of JavaScript so that when an image is clicked a separate window opens. This will work in every other browser (including mobile) except for IE. Following is what I've included in my head tag -

<script type="text/javascript">
 function open_win() {
 window.open("music/player/song-of-my-soul.html", "_blank, _top", "toolbar=no, location=no, directories=no, status=no, menubar=mo, scrollbars=yes, resizable=no, toolbar=no, copyhistory=yes, width=240, height=400,");
 }
</script>

I have then created a div with a background image and hover image, that when clicked should open the above page. Following is the line I have placed within the div -

a href="#" alt="Listen to Samples" title="Listen to Samples" class="play-link" onclick="open_win()">

This works fine in every other browser, but will not work in IE. I have tried several ways to reference the JavaScript in the head, but none of them will work.

The page that I'm testing this on can be seen at the following - http://www.christlikemusic.com/song-of-my-soul.php# The 'Play' button in the center towards the bottom is the image that I have linked.

If anyone would have any ideas on how I might fix this I would be most grateful !

David

In IE there are some javascript errors in the page, did you check what are they? — Arun P Johny, Sep 14 '11 at 15:12
check out http://stackoverflow.com/questions/710756/ie8-var-w-window-open-message-invalid-argument — Tim B James, Sep 14 '11 at 15:17

score 6 · Answer 1 · answered Sep 14 '11 at 15:07

6

You have a trailing comma in the windows options list:

 [snip] ... copyhistory=yes, width=240, height=400,");
                                                  ^--- here

IE is notoriously stubborn about trailing commas, and will regularly barf all over itself if it comes within a few miles of one.

answered Sep 14 '11 at 15:07

Marc B

356,200
43
426
500

And JavaScript is notoriously unforgiving about syntax ;) – James Johnson Sep 14 '11 at 15:11
@ Marc B Thanks so much for pointing that out. I'm still getting used to JS . . – David O'Brien Sep 15 '11 at 10:04

score 2 · Answer 2 · answered Sep 14 '11 at 15:10

2

The window name can not have space.

So you need to change "_blank, _top" to something else.

answered Sep 14 '11 at 15:10

epascarello

204,599
20
195
236

Thanks so much for that. I was able to change it and that worked. – David O'Brien Sep 15 '11 at 10:05

score 1 · Answer 3 · answered Sep 14 '11 at 15:09

Try wrapping the window.open with the void function:

EDIT: You also had a trailing comma after the height specification.

<script type="text/javascript"> 
    function open_win() { 
        void(window.open("music/player/song-of-my-soul.html", "_blank, _top", "toolbar=no, location=no, directories=no, status=no, menubar=mo, scrollbars=yes, resizable=no, toolbar=no, copyhistory=yes, width=240, height=400")); 
    } 
</script>

Here's a method that I created for opening child windows. You can use this if you'd like:

openChildWindowWithDimensions = function(url, width, height, showMenu, canResize, showScrollbars) {
    var childWindow = window.open(url, "", "\"width=" + width + ",height=" + height + ",menubar=" + (showMenu ? "1" : "0") + ",scrollbars=" + (showScrollbars ? "1" : "0") + ",resizable=" + (canResize ? "1" : "0") + "\"");
    if (childWindow){
        childWindow.resizeTo(width, height); //IE9 bug
    }
}

Thanks for pointing that out James. Appreciate you sharing your method too. I was able to sort it out using one of the other suggestions though. Thanks again . . — David O'Brien, Sep 15 '11 at 10:08
@James Johnson: using the void function cured my problem (I had used windows.open in a sitemapnode url attribute. Worked fine in all browsers except IE. With void, it works fine in all browsers). — awrigley, May 10 '13 at 12:48

score 0 · Answer 4 · answered Sep 14 '11 at 15:18

The problem is the second argument. Try

window.open("music/player/song-of-my-soul.html", "_blank", "toolbar=no, location=no, directories=no, status=no, menubar=mo, scrollbars=yes, resizable=no, toolbar=no, copyhistory=yes, width=240, height=400");

The second parameter is the name of the window to be opened. It has to be a valid name, in your case you have passed it as _blank, _top which is not a valid name. It can be _blank.

You can find more valid values here and IE definitions here.

If you are using a new IE version like IE8/IE9 then you can run the command using the developer tool which comes with IE and find that the window.open is throwing an invalid argument error.

Thanks for that Arun, it was exactly the problem. Your suggestion worked perfectly ! Hugely appreciate the help =) — David O'Brien, Sep 15 '11 at 10:06

JavaScript Onclick window.open will not work properly in IE

4 Answers4