Javascript and target="_top" - javascript

I'm working with a legacy frames website that was just moved into an iFrame.
Assuming I have the following function:
<script language = "javascript">
function myFunction(){
<!-- no console.log in IE 7 (my required target browser) -->
alert('sup, yo?');
}
</script>
and the following hyperlink triggering the function:
click me
before the move into an iFrame this worked ok. Once the website was moved into the iframe, clicking the link in IE (not FF or Chrome), I would get the ever-so-helpful error:
Line: 1
Object expected
Once I removed the target="_top" attribute the function would work, so I don't need help solving the problem, but my question is:
What is IE doing with the target attribute when calling a javascript function to invoke this behavior? I don't have other versions of IE installed, is this current behavior in 8+ as well?
Thanks.

It does not make sense to try to understand the behavior. You're using a technique that is not well defined and is not used by developers nowadays.
Instead of href="javascript:myFunction();, just use onclick="myFunction(); return false" or even better, set the handler from JS like the following
<a href="pageForUsersWithoutJs.html" id="my-link" >click me</a>
<script type="text/javascript">
// This is old school, but works for all browsers, you should use a library instead
document.getElementById('my-link').onclick = function() {
// Do your thing
return false; // so the link isn't followed
};
</script>

Related

onbeforeunload event not firing in my code, but other examples work?

As usual, I want to alert users to unsaved changes when leaving a page. I have this test page:
<html>
<head>
<title>Testing</title>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/base.js"></script>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/edit.js"></script>
<script language="JavaScript1.1">window.onbeforeupload=moveAway</script>
</head>
<body onLoad="init()">
Google
</body>
</html>
The moveAway function is defined in "edit.js" like this:
function moveAway ()
return "foo";<br>
}
The event doesn't fire, or at least it just leaves the page silently (using IE8, Firefox 15, and Chrome 20). I've tried breakpointing the function in Firebug and it never gets to the breakpoint. I've tried it from the web server (an SSL server, the test version of which runs at 127.0.0.1:8443) and I've tried opening the file directly with the browser (which is why I used absolute URLs for the first two <script> tags). I've tried removing the "src=" attribute from the script tags.
On the other hand, this page has an example which does work (at least in Firefox):
https://web.archive.org/web/20211028110528/http://www.4guysfromrolla.com/demos/OnBeforeUnloadDemo1.htm
There is also a very similar example at MSDN which also works:
http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx
I really can't see the difference between what they do and what I'm doing. can anyone tell me why their code works and mine doesn't?
use jQuery bind function.. it works great for me..
see bellow
$(window).bind('beforeunload', function() {
return "Want to leave?";
});
onbeforeupload , really ? it should be onbeforeunload. Is that a spelling mistake, or is that how your actual code is ?
You have a syntax error, the function should be:
function moveAway () {
return "foo";
}

Why is my onclick event not registered in Firefox?

I have a list item with an onclick event. It runs in Chrome and Internet Explorer, but not Firefox. Any suggestions?
<li onclick="alert('test');">test test<br></li>
This works fine for me in Firefox.
Check this:
JavaScript is enabled in your browser.
Try adding a return false; statement in your tag.
Or a function like this:
function test() {
//your code here
return false;
}
Or use this:
Link
or this
Link
I was trying to minimize my html code to send a complete code to simulate the error as Boris Zbarsky requested. Then I found my mistake.
I was using marquee tag which has been deprecated. Now I am going to use jQuery instead of it.
thx
In Firefox, the event object is not global. You have to access it within your script tags not in html.
onclick works likes this
<li id="alert">test<br></li>
<script>
document.getElementById("alert").addEventListener("click", function( event ) {
alert('test');
}, false);
</script>
Attributes can be ignored by Firefox when it is served invalid HTML, use
https://validator.w3.org/
to clean up the HTML.

How can I launch a PARENT jQuery function?

I'm trying to figure out how to launch a function from an iframe but the following example won't work, any ideas?
<input class='reply' onclick='parent.replytopost()' type='button' value='Reply' />
PARENT PAGE FUNCTION (In the body if that makes a difference):
<script>
function replytopost(){
alert("test");
parent.document.getElementById('mainbar').innerHTML = "TEST";
parent.document.getElementById('post_reply').show();
}
</script>
This might become an issue with security-tightened browsers (such as Safari).
I ran against the same type of problem recently, and I'm now a happy user of window.postMessage.
You will still have to reference it using window.parent but this will prevent the vast majority of issues to happen.
It works for me. Look here
Why do you call parent.* in non-iframe replytopost script?
Will window.opener work for you? I know it works from a parent to a newWindow. I don't know about iframe.
http://www.w3schools.com/jsref/prop_win_opener.asp

Accessing javascript variables in different frames in chrome

I am having problems passing javascript values between frames in chrome. In other browsers (Opera and Firefox) it works. The first frame contains the following html:
<script> variable="frame 1 value";</script>
click here
and test.html is:
<html>
<head>
<script>window.onload = function() {
div = document.getElementById("fred");
div.innerHTML="<b>" + top.frames[0].variable + "</b>";
}
</script>
</head>
<body>
<div id="fred">
hi there</div>
</body>
</html>
I have looked on this site and others, and the have seen a suggestion that because chrome pages run in different processes they cannot pass values. Is this true, and if so is there a way around it (cookies?)
Thanks,
russell
(edited) I just found another answer which says this happens only on file protocol. Like the writer of the other question, I am writing an applicaiton meant to be run off a cd, so I need to use file protocol. The version of Chrome I am using is 9.0.
ry
This has something to do with cross-site scripting which may be a security issue. Since Chrome has a very strict behavior on this, it should be impossible to achieve what you want.
Fortunately, there may be a nifty trick that you can use (if your variable is only a string):
Change the link in the first frame to test.html?foo=bar
Read window.location.href in the second frame. This will yield something like "Z:\folder\test.html?foo=bar". Now you can use string manipulation functions to extract the value of foo (in case: bar) from the href.
HTML5 Storage to the rescue! For the first frame:
<script>localStorage.setItem('variable', 'frame 1 value');</script>
click here
And for test.html:
<html><head>
<script>
window.onload = function() {
div = document.getElementById("fred");
div.innerHTML="<b>" + localStorage.getItem('variable') + "</b>";
}
</script>
</head><body>
<div id="fred">hi there</div>
</body></html>
A note of caution: IE7 and some older browsers do not support localStorage. However, you should be able to use if (typeof(localStorage) == 'undefined') {} to detect which method you need to use.
Frames are deprecated since 1997 (HTML 4.0 specification) for many reasons - so the best recommendation is do not use them.
You can also run Chrome with command line argument --disable-web-security, but it is also bad recommendation.

flash fscommands and javascript

I try get the mp3 flash player to work with my javascript on all browsers. All went well for first, but fast realized that my code doesn't work on MSIE.
After trying to find out I found this in the reference code:
<!--[if IE]>
<script type="text/javascript" event="FSCommand(command,args)" for="myFlash">
eval(args);
</script>
<![endif]-->
How to turn this into a javascript or jquery clause that I could stuff it where it belongs to (in audio.js)?
That syntax, with the <script> tag with the "event" and "for" attributes is an Internet Explorer-only way of setting up an event handler on an DOM object. Here, it adds a FSCommand event handler to the myFlash object. This is needed because code running inside the Flash object may want to run JavaScript in the browser. To do this, the Flash object will invoke the FSCommand event handler, passing the JavaScript to run as the arguments to the event.
With this player, the name of a JS listener object is passed in the FlashVars param to the player. It then uses FSCommands from ActionScript to modify that listener object, with an occasional call to a method on that listener when it's other properties have been modified. I suppose that IE isn't able to run the JS code using this method until the FSCommand handler has been added to the Flash player object, which is why that code exists. Modify it to use the ID of your Flash object and you should be in good shape.
Maybe this is more about embedding flash dynamically.
I got stuck on exactly the same thing with mp3 flash player. The thing is that IE doesn't care about the special script tag with 'event' and 'for' attribute, if it is added AFTER the page has loaded. My IE wouldn't event eat jquery's .html() when the page loaded, only document.write worked. But document.write can't really be used after the page has loaded, unless it is targeted in an iframe or some other devil worship mechanism.
What's good tho, is that IE doesn't distinguish between assigning an event handler in this bastard script tag or programatically. This means that:
<script type="text/javascript" event="FSCommand(command,args)" for="myFlash">
eval(args);
</script>
in IE directly translates to:
function foo(command, args){
eval(args);
}
var ie_sucks = document.getElementById('myFlash');
ie_sucks.attachEvent("FSCommand", foo);
And... in the end we have that:
var ie_sucks = document.getElementById('comebacker_audio');
ie_sucks.attachEvent("FSCommand", function(command, args) {eval(args);});
and if that not work for you, try to check your html for inserting object. Example here:
http://kb2.adobe.com/cps/415/tn_4150.html
;)
Thanks everyone for the above. I'll just drop a few lines that were handy for me.
To re-use code across browsers, do:
<script type="text/javascript">
function mySwf_DoFSCommand(command, args) {
// do stuff
}
</script>
<!--[if IE]>
<script type="text/javascript" event="FSCommand(command,args)" for="mySwf">
mySwf_DoFSCommand(command, args);
</script>
<![endif]-->

Categories