Javascript frameset navigation - javascript

It is a long time since I programmed web. How do I perform javascript frameset navigation (or replace the frameset with an exact equivalent):
<frameset rows="*,32">
<frame src="about:blank" id="viewer">
<frame src="cgi/browse.exe?images">
</frameset>
The webpage generated by browse.exe conains an javascript array with a list of files, and two buttons: previuos and next. When the user clicks next, next file should be displayed in the "viewer".
I have tried
parent.frames["viewer"].location.assign("...");
without success in FF. It works in IE. Note that the navigation works fine as long as I stay inside the same frame.

Try to replace the id with the name attribute, then it should work well in all browsers. Tested it on these pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index.html</title>
</head>
<frameset cols="240,*">
<frame name="fmenu" src="leftmenu.html" scrolling="yes"/>
<frame name="viewer" src="page1.html" scrolling="yes"/>
<noframes><p>noframes</p></noframes>
</frameset>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>leftmenu.html</title>
</head>
<body>
<a onclick="window.parent.frames['viewer'].location.assign('page2.html')">test</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page1,2.html</title>
</head>
<body>
<p>START PAGE</p>
</body>
</html>

Related

Weird bug in Firefox using disabled="disabled"

I nibbling on a bug in ff:
See http://nocturne.wmw.cc/bugff.html (not reproducable in jsfiddle - too bad)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<button disabled="disabled">sdf</button>
<script>
jQuery(function(){
if(!jQuery('button').is(':disabled'))
alert('Is not disabled!');
jQuery('button').removeAttr('disabled');
});
</script>
</body>
</html>
Now the Problem:
If i load the first time, everything is ok.
If i reload the page using Ctrl+r, the alert() shows the error-message.
If i Reload using Ctrl+Shift+r the bug does not occoure.
I do use Microsoft® Windows® 7.
Reproduceable at least at FF28, FF29.
How to solve?
The issue seems to be the same mechanism that stores user-input for form-elements, the state of the button has been cached.
possible solution(see: How can I stop Firefox from caching the contents of a textarea on localhost? ):
<button disabled="disabled" autocomplete="off">sdf</button>
http://jsfiddle.net/doktormolle/4ZLd9/show/
Just try disabled instead of disabled = "disabled"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<body>
<button disabled>sdf</button>
<script>
jQuery(function(){
if(!jQuery('button').is(':disabled'))
alert('Is not disabled!');
jQuery('button').removeAttr('disabled');
});
</script>
</body>
</html>

Invoking javascript in iframe from parent page. Youtube video

I would like to play a YouTube video in my iframed page. In index.html I have made a iframe which source is video.html. What JavaScript command you can suggest?
Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<iframe src="video.html" id="vidframe" width="100%" height="500"></iframe>
</body>
</html>
video.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video</title>
</head>
<body>
<iframe width="640" height="480" src="//www.youtube.com/embed/jofNR_WkoCE" frameborder="0" allowfullscreen></iframe>
</body>
</html>

twitter share button doesn't count properly

I tried to change my ip then share it again but still doesn't count.
My Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<title>:: my test ::</title>
</head>
<body>
Tweet
</body>
</html>
someone could help me?
Have you tried adding the JavaScript under the anchor tag.
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}
(document,"script","twitter-wjs");</script>
as described at https://dev.twitter.com/docs/tweet-button

Capture onkeydown in top window

I try to capture onkeydown event in a window wich contains a iframe containing mutliple framset :
top.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> top.html </title>
</head>
<body>
<iframe frameborder="0" border="0" width="100%" height="100%" src="framset1.html" id="framset1"></iframe>
</body>
framset1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET rows="66,*" border="0">
<FRAME scrolling="no" id="frame1" name="frame1" src="frame1.html">
<FRAME id="framset2" name="framset2" src="framset2.html">
</FRAMESET>
</HTML>
framset2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="46,*" border="0">
<FRAME scrolling="no" id="frame2" name="frame2" src="frame2.html">
<FRAME id="frame3" name="frame3" src="frame3.html">
</FRAMESET>
</HTML>
I want to capture event onkeydown in frame3. I have found a relative question on stackoverflow here but applied without succes.
Do i have to continue on this way or anyone can help me.
Thanks.
Paul
If you want to assign the event listener in the top frame (top.html):
document.getElementById('framset1').contentDocument.getElementById('framset2').contentDocumentcontentDocument.getElementById('framset3').contentDocument.addEventListener('keydown', function(e) {
alert('keydown in frame 700');
}, false);
This only works if all frames are on the same domain + port. Otherwise you'll get a security exception trying to access document.getElementById('framset1').contentDocument.
But frames within frames within frames... Is that what you really want??

Is the following valid XHTML 1.0 Transitional?

The w3c validator service complains that the following html is invalid. It does not like the ampersand(&) in my javascript. But ampersands are allowed in javascript strings, aren't they?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
</head>
<body>
<script type="text/javascript">
function search(query) {
redir = "http://search.mysite.com/search?s=FIN&ref=&q=" + query;
window.location.href = redir
return false;
}
</script>
<span>This is all valid HTML</span>
</body>
</html>
All browsers will take this, but to make it valid X(HT)ML you need to put the Javascript code in a CDATA block.
Even in javascript w3c validator don't like ampersands. Try to comment your javascript from validator
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[//><!--
function search(query) {
redir = "http://search.mysite.com/search?s=FIN&ref=&q=" + query;
window.location.href = redir
return false;
}
//--><!]]>
</script>
<span>This is all valid HTML</span>
</body>
</html>
No, it is indeed not valid. If you want to use in-line JavaScript in an XHTML file, you'll need to wrap the JavaScript in CDATA. If you don't want to do that, then you're stuck with encoding &, < and >, which in JavaScript can be quite a pain.

Categories