Why is this 'href' value not working in Opera? - javascript

I have the following:
Test
When run in Chrome, it functions as expected and turns the page red. However, in Opera I get:
[object Object]
Closer inspection reveals that Opera thinks that javascript:Query('body')... is some kind of URL. What am I doing wrong? Doesn't Opera recognize javascript: links in the href attribute?
jsFiddle: http://jsfiddle.net/9CZZL/
Edit: seems to be a Firefox problem too...

The issue is that the return value of jQuery('body').css('backgroundColor','red') is an object, which some browsers interpret as the new content for the web page. To fix this, you can use the JavaScript void operator to turn it into undefined, which FF and Opera (and potentially others) will handle as you intended. You will notice that this issue is also described on that page, since it's the premier use-case of the void operator (other than code golf where void 0 is less characters than undefined).
Test
This should give the intended result: http://jsfiddle.net/9CZZL/13/
It should be noted that handling clicks this way is considered bad practice. Instead, using event handlers in JavaScript is recommended. This helps separate the different layers of your web app, which in turn will make debugging in the future easier.

I just did a google search and no, apparently Opera does not recognise "javascript:" href values. You would have to implement an onClick or similar solution.

Does it in Firefox too.... not quite sure why. But I never liked putting JavaScript right in the URL... you could try putting it in the onclick event or pull the whole thing out and separate it:
http://jsfiddle.net/mnbayazit/6d5An/

These all work as href values for me in Opera 10.1:
javascript:void(0)
javascript:alert("Hello")
javascript:window.location.href = 'http://www.google.com'
Your snippet does not though.
A viable work around is:
Test
Or even:
Test
...since that seems to work.

Related

Error when using js in href ie 11

I have a link:
someText
it works fine everywhere except ie(i try ie11) i have this error
This page can’t be displayed.
Make sure the web address //ieframe.dll/dnserror.htm# is correct.
How can i solve this?
If you use a javascript URI scheme in a HTML href attribute, this is different to using an onclick event handler.
In IE, the result of executing that JavaScript will replace the currently loaded document.
To avoid this (without refactoring your code to not do things this way), you can end your href with the javascript operator void, which tells your javascript to return nothing, at all (well, undefined).
Then IE will stay on the current page.
<a href="javascript:someObject.someFunction(); void 0" ...
...and you probably don't want the target="_blank" since you're telling a new window to run your JavaScript code, and your function is not available in that window.
I would do this instead:
someText
It will open a new tab as you intended, and it works in chrome, firefox and IE.

Jquery Error in ie8 and ie9 with Wordpress theme. (Object doesnt support this property or method)

I recently launched a website for a client http://www.bridgechurch.us/ only to recieve complaints of it not displaying correctly on ie8 or ie9. I have confirmed this to be true. IE is pointing to this line of Javascript:
jQuery(function () {
jQuery(".scrollable").scrollable({circular: true}).navigator().autoscroll({interval: 7000});
[...]
Can anyone help me figure out what is wrong with this line of code?
Thank you
UPDATE - FIXED
I figured out that there was a comment before the Doctype Declaration that forced IE into quirks mode.
You have a lot of 404's on that page, mainly related to ie-specific css and border images, which is probably why the page doesn't look like it should. Files like /images/internet_explorer/borderBottomRight.png and /wp-content/themes/Moses/styles/default.css aren't loading.
That being said, looking at the scrollable documentation, there is no .navigator() function off of the return value of scrollable(); and I'm getting the same error in Chrome.
Well, visually, the site doesn't appear to work well at all in IE9 (compared to Chrome). But just looking at the code that adds scrollable() to jQuery, you can see that that function doesn't always return the original element. In your code, if you split the call into two, you might be ok:
jQuery(".scrollable").scrollable({circular: true});
jQuery(".scrollable").navigator().autoscroll({interval: 7000});
I blame the plug-in on this one: functions that extend jQuery are supposed to always return the original elements found by the selector.

Create a <noscript> element with content fails on IE7 and IE8 (jQuery)

I've seen several threads about reading contents, but nothing on writing to noscript.
$('body').append('<noscript><div></div></noscript>');
In Chrome and IE9 I get a noscript-element with a empty div inside like I expect, but in IE7 and IE8 I just get a empty noscript-element without the div inside.
Example: http://jsfiddle.net/cEMNS/
Is there a way to add HTML inside the noscript-tag that works in all browsers? What I need is to add some tracking code into a noscript-element at the end of the page, but the info I need isn't available until after document ready.
Edit: I'm getting a lot of comments on "why". It's some poorly done tracking library that requires this. We don't have access to the code to change it. Regardless, I find it interesting that it works in some browsers and not in others since jQuery was supposed to work equally in all browsers. Is it simply a bug?
Edit2: (2 years later) Adding a noscript on the browser doesn't make sense, I know. My only excuse not the question the task I had was because of lack of sleep, like everyone else in the project. But my rationale was that jQuery should behave the same on all browsers and someone might want to do this on the server.
Regardless of the tracking code, what you are doing (or are required to do) makes no sense!
Why? There are two cases possible here:
user has JavaScript enabled in which case the NOSCRIPT get's inserted into the DOM but is ignored by the browser (does nothing)
user does not have JavaScript enabled, NOSCRIPT does not get inserted and does not "execute"
The end result of both cases is that nothing actually happens.
Just an idea: You could try giving your noscript tag an ID, and then try to use native js.
for example:
$('body').append('<noscript id="myTestNoScript"></noscript>');
document.getElementById('myTestNoScript').innerHTML = '<div></div>';
I would claim that if it does not work with native js, it will not work with any library (feel free to correct me on this one).
I tried following simple HTML code:
<html>
<body>
<noscript>I'm a noscript tag.</noscript>
</body>
</html>
Then I did analyse this with IE8 (in IE7 mode) and his integrated code insprector. Apparently the IE7 checks are script allowed. If so he declared it as empty. And empty tags will be ignored. Unfortunatly I could not try that with disabled script option, because only the Systemadministrator can change the settings (here at my work).
What I can assure you, the noscript does exists. If you add
alert($('noscript').size());
after the creation, the result will be 1.

Javascript location.replace bug in Opera

I'm am doing a JS location.replace in Opera. There is a known bug that the location does not get replaced but updated when only the location.hash changes (see http://my.opera.com/community/forums/topic.dml?id=568931).
I was trying to do the following workaround:
var url = location.href.split("#")[0];
if (window.opera) {
window.history.back();
}
location.replace(url + '#' + newhash);
Unfortunately that does not seem work. Before I start experimenting with setTimeout, I wanted to check if maybe someone has a better idea.
I think the best workaround for this is to not work around it at all.
Reasoning: firstly, the script running in this page should be terminated if I use the back button, or history.back() is called. Hence, in your workaround above the script will (or should) actually stop running before the location.replace() call. We can not remember that you wanted to call location.replace() and do it on the page you've gone back to, because that would be a script injection security issue.
Secondly, even if this workaround worked I would very much recommend not using it. The reason is that Opera will eventually fix its bug. If an end user used a fixed Opera version and a page running your script, each click on one of your links would remove one entry from that user's browsing history..
For a proper solution, you could investigate history.replaceState() - a new method specified in HTML5: http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#dom-history-replacestate
Can you clarify a bit? I took the example from the forum link you posted and uploaded it here: http://people.opera.com/miket/tmp/replace.html. In Opera 11.61/Mac, it appears to work as expected.
Are you seeing something different? Can you explain your problem in more detail?

How to reproduce: Script Error, "Object does not support this property or method."

Can any one give me a scripts (HTML/CSS/Javascript) that can reproduce this error on IE 7.0? I am trying to fix this bug in my page where I get this warning but could not exactly found the problem. Line number does not match with the source either.
I thought the better approach would be to create a bug and then work on it incrementally rather than making some wild guess!
As Shog said, that error will occur when you try to call a method on an object which doesn't have that method.
This is most often caused by an object being null when you expect it to, well, not be null.
var myEl = document.getElementById('myElement');
myEl.appendChild(...)
The above example will cause that error if the "#myElement" element doesn't exist.
If it's only happening on IE and not Firefox, chances are it's because you're using a method which IE doesn't support.
The solution? You can try the Script Debugger, but I've never found that to be useful myself. The most reliable, yet painfully slow method is alert() debugging. At strategic points through your code, put in an alert with a unique message. At some point IE will throw an error, so you'll know that the error is somewhere between the last alert which you saw, and the next one which didn't.
function myFunc() {
alert('a');
var myEl = document.getElementById('myElement');
myEl.appendChild(something);
alert('b');
// more code
}
if you ran that and you saw 'a' but not 'b' you know it's in between there somewhere. This is just the sad state of javascript in IE, I'm afraid.
If you make your code follow the jslint.com rules, it will go away.
It will also point you at exactly where the issue is in your code.
I thought the better approach would be
to create a bug and then work on it
incrementally rather than making some
wild guess!
You would be wrong. There are countless scenarios that could produce the error you are seeing. All it means is that you're trying to call an undefined method. For instance:
var blah = {};
blah.methodWhichDoesntExist(); // <-- error
This could be the result of a typo, an undetected failure in some other component, or gamma rays consistently flipping bits in your HTML right after you save. Hard to be any more specific without knowing more about what you're doing.
For IE, download the Microsoft Script Debugger
I just fixed a similar bug by using IE8 and switching it into IE7 mode. You then get a more specific error message telling you which line of which file is failing.
After that set a breakpoint so that the code stops just before the offending line (F12 to get to debugger tools, then choose the JS file you want from the 'scripts' dropdown and click to the left of the line number. Click 'start debugging' to make it use the breakpoints).
As others have pointed out, this error could have many causes, but in my case, I had two IDs on the same page with one capitalised and one not. getElementById() was getting the wrong one. Only IE7 complained.

Categories

Resources