I have a site with URL links on a Links page. Each link takes you to a Frame page that is a big iFrame that pulls in the given URL. I'm using javascript to do this and it works in FF, Safari, Opera and Chrome, but not IE. Does anyone know what I can do to get it to work in IE?
I've built it in WordPress. I have this in Head section between tags and tags:
<script type="text/javascript" language="javascript">
function loadIF() {
iFrameSrc=location.href.split('?');
if ( iFrameSrc[1] != null ) {
document.getElementById('external').src=iFrameSrc[1];
}
else {
document.getElementById('external').src='default_page.htm'
}
}
</script>
Then I put this in header.php as well:
<body onload="loadIF()" <?php body_class(); ?>>
Here is the link markup:
Website
Thanks-
Chris
You seem to be splitting the location on the ? does that mean you are trying to get the parameters?
if so:
iFrameSrc = location.search;
if(iFrameSrc)
{
... // Code here
}
else
{
... // Code here
}
or try
if(iFrame && iFrame.length > 2)
{
... // Code here
}
else
{
... // Code here
}
EDIT ok so after seeing your edit i thought i better add this:
Take the first code example I gave you and replace the first ... // Code here with:
document.getElementById('external').src= iFrameSrc.substr(1); // This will remove the leading question mark.
UPDATE
<html>
<head>
<title></title>
<script type="text/javascript">
function iFrameIF()
{
iFrameSrc = location.search;
if (iFrameSrc)
{
alert(iFrameSrc.substr(1));//document.getElementById('external').src = iFrameSrc.substr(1);
}
else
{
alert(); //document.getElementById('external').src = 'http://about:blank'
}
}
</script>
</head>
<body onload="iFrameIF()">
<iframe width="100%" height="1000" marginheight="1" marginwidth="1" align="top" allowtransparency="true" frameborder="0" name="external" id="external"></iframe>
<br />
</body>
</html>
typing into ie: file://path/to/file.html?test got me an alert saying "test"
Related
I want to make a footer credit protection using javascript. I've seen one using jquery. But it didn't worked properly. I want to apply that code to my blogger templates. I've written the following javascript code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function lol(){
var footer = document.getElementById("mycreditlink");
if (footer.hasAttribute("href")) {
footer.setAttribute("href", "http://grplusbd.net");
}
if (footer == null){
window.location.href = "http://grplusbd.net";
}
}
window.onload = function(){lol();};
</script>
</head>
<body>
<div>
Powered By <a href='http://google.com' id='#mycreditlink'>My Site</a>
</div>
</body>
</html>
But it isn't working properly either. I want it to make the footer url change automatically and if the id="mycreditlink" is removed by the client, it will redirect automatically to my website home. I need help immediately. If the code works, I will enode it and add to my templates.
<div>
Powered By <a href='http://google.com' id='mycreditlink'>My Site</a>
</div>
There is a error here: id='#mycreditlink' need to be like: id='mycreditlink'
And
function lol(){
var footer = document.getElementById("mycreditlink");
if (footer.hasAttribute("href")) {
footer.setAttribute("href", "http://grplusbd.net");
}
if (footer == null){
window.location.href = "http://grplusbd.net";
}
}
window.onload=function(){lol();};
or
window.onload=lol();
You can make use of jQuery as I have done below...
<script type="text/javascript">
function lol(){
var footer = jQuery("#mycreditlink");
if (footer) {
jQuery(footer).attr("href", "http://grplusbd.net");
}
else {
window.location = "http://grplusbd.net";
}
}
window.onload = function(){lol();};
</script>
I made an iFrame and would like to change it's source when it's load to next of 10 different sources:
It would look like this:
iframe loaded => change to example.com => iframe loaded => change to example1.com => iframe loaded => change to example2.com...
Is there any way to do this? ... I'm stuck on this and have no idea what can i do:
<html>
<body>
<iframe src="http://www.example.com"> </iframe>
<script>
var links = [
"http://www.js.com",
"http://example.com",
"http://example1.com"];
alert(links[2])
function srca (){
document.getElementsByTagName('iframe')[0].src = links[0]
}
</script>
</body>
</html>
You were almost there, you just forgot to hook into some kind of event (like onload)..
Just to get you started, here ya go:
<html>
<head>
<script>
var links = [ 'http://www.js.com'
, 'http://example.com'
, 'http://example1.com'
]
, lnkCnt = 0
;
function srca(){
links.length > lnkCnt && (
document.getElementsByTagName('iframe')[0].src = links[lnkCnt++]
);
}
</script>
</head>
<body>
<iframe src="about:blank" onload="setTimeout(srca, 2000);"></iframe>
</body>
</html>
I have a bunch of web pages where I have an identical construct:
<html>
<head>
<script src="sorttable.js"></script>
<noscript>
<meta http-equiv="refresh" content="60">
</noscript>
<script type="text/javascript">
<!--
var sURL = unescape(window.location.pathname);
function doLoad()
{
setTimeout( "parent.frames['header_frame'].document.submitform.submit()", 60*1000 );
}
function refresh()
{
window.location.href = sURL;
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.replace( sURL );
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.reload( true );
}
//-->
</script>
</head>
<body>
.
.
.
<script type="text/javascript">
window.onload = function() { sorttable.innerSortFunction.apply(document.getElementById("OpenFace-2"), []); doLoad(); }
</script>
</body>
</html>
This works perfectly in every page except for one, where when the onload function runs it cannot find the sorttable code (which is loaded from sorttable.js up at the top). All these pages are part of the same application and are all in the same dir along with the js file. I do no get any errors in the apache log or the js console until that page loads, when I get:
sorttable.innerSortFunction is undefined
I can't see what makes this one page different. Can anyone see what is wrong here, or give me some pointers on how I can debug this further?
The code I pasted in is from the source of the page where it does not work, but it is identical as the pages where it does work.
Looks like on that page the table with id OpenPhace-2 by which you try to sort have no needed class: sortable
The function innerSortFunction of sorttable object will be present only if there is any table with sortable class exists.
I am trying to use Javascript to swap an image, so far I can get it from A to B, but not back.
Here is what I'm using to create one swap:
<img src="pic1.png" name="pic" onclick="window.document.pic.src='pic2.png';"/>
This swaps image 1 to image 2, simple enough. But I want to be able to revert back to image 1 by clicking on the new image 2. I tried using this:
<img src="pic1.png" name="pic" onclick="
if (window.document.pic.src='pic1.png'){
window.document.pic.src='pic2.png';
}
else if (window.document.pic.src='pic2.png'){
window.document.pic.src='pic1.png';
}"/>
It doesn't seem to work in this instance. It will switch to pic2, but not switch back to pic1. Is it something to do with onclick? My if statements? Thanks
Try this simple trick... easy to maintain.
<script>
var onImg= "on.jpg";
var offImg= "off.jpg";
</script>
<img src="on.jpg" onclick="this.src = this.src == offImg ? onImg : offImg;"/>
In your code the problem is
when you alert window.document.pic.src its print like http://localhost/pic1.png
and then you are are use condition if (window.document.pic.src == 'pic1.png')
how is it true.
try this
<script type="text/javascript">
function test()
{
alert(window.document.pic.src);
//alert msg print like http://localhost/test/pic1.png
if (document.pic.src=='http://localhost/test/pic1.png'){
document.pic.src='pic2.png';
}
else if (document.pic.src=='http://localhost/test/pic2.png'){
document.pic.src='pic1.png';
}
}
</script>
<img src="pic1.png" name="pic" onclick="test()"/>
wrong use of == in if condition
if (window.document.pic.src == 'pic1.png'){
window.document.pic.src='pic2.png';
}
else if (window.document.pic.src =='pic2.png'){
window.document.pic.src='pic1.png';
}"/>
window.document.pic.src='pic1.png' assigns pic1.png to the left hand side. It does NOT compare.
Though not directly relevant, try not to access elements by their name globally. Use their id.
Your javascript should not be inside the onclick. It should be inside a javasctipt function
Combined:
The img tag:
<img src="pic1.png" name="pic" id="pic" onclick="swap()"/>
The javascript
<script>
function swap()
{
if (document.getElementById("pic").src.endsWith('pic1.png') != -1) //==:Comparison
{
document.getElementById("pic").src = "pic2.png"; //=:assignment
}
else if (window.document.pic.src.endsWith('pic2.png') != -1)
{
document.getElementById("pic").src = "pic1.png";
}
}
</script>
Your code is doing what the below lines do, it's not going inside an if else block, so if you remove your if else block the code still will work, because on mouse click it sets the value of src as 'pic2.png', which was 'pic1.png' earlier, and when you click again because it's already pic2.png so it remains the same.
<html>
<head>
<script type="text/javascript">
function swap() {
window.document.pic.src='pic2.png';
}
</script>
</head>
<body>
<img src="pic1.png" name="pic" onclick="swap()">
</body>
</html>
You can try this.
<html>
<head>
<title>Swapping Images</title>
</head>
<body>
<img id="myimg" src="img1.jpg" hieght="300" width="300" onClick="change ()"/>
</body>
</html>
<html>
<head>
<script>
function change () {
var img=document.getElementById("myimg");
if (img.src === "img1")
img.src="img2.jpg";
else
img.src="img1.jpg";
}
</script>
</head>
</html>
I am following a JavaScript tutorial on the W3Schools website and I have the following code:
<html>
<head>
<title>Hello!</title>
</head>
<body>
<script type="text/javascript">
function confirmShow
{
var r = confirm("Press one...")
if (r == true)
{
alert("Button pressed == OK")
}
if (r == false)
{
alert("Button pressed == Cancel")
}
}
</script>
<input type="button" onclick="confirmShow()" value="Show Confirm Box" />
</body>
</html>
and whenever I preview it in Coda or in Safari the alert never shows up.
Thanks in advance!
"function confirmShow" => "function confirmShow()"
Firebug is good for js debugging, try it. Safari has options too, AFAIK.
function confirmShow
{
function confirmShow()
{
?
I don't know if this is your problem, but your button is outside the <body> tag. That might cause you some trouble...
Also one would usually put a script like this in the <head> element. Just FYI.
1) w3schools is filled with errors and omissions. Better tutorials can be found at howtocreate.co.uk
2) You have no DOCTYPE declaration, and you're using XHTML syntax.
2.1) IE doesn't support true, see webdevout.net/articles/beware-of-xhtml for more information
3) You need to encapsulate the within a element as well as another block-level element as per the specification
See below for a proper HTML5 document. Notice the location and syntax
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<script>
function confirmBox() {
var ret = confirm('Some Text');
/*
Note the 3 equal signs. This is a strict comparison operator, to check both the 'value' as well as the type. see https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators for more
*/
if(ret === true) {
alert('Alert box for "Okay" value');
}
else if(ret === false) {
alert('Alert box for "Cancel" value');
}
}
window.onload = function() {
// Execute the confirmBox function once the 'button' is pressed.
document.getElementById('confirmBox').onclick = confirmBox;
}
</script>
</head>
<body>
<form>
<p>
<input type="button" id='confirmBox' value="Show Confirm Box">
</p>
</form>
</body>
</html>