I have three meta variables: Concept, DocType and Path that I want to add to my URL so that I up with something in my browser that looks like "http://www.mywebsite.com/page.html?concept=var1&doctype=var2&path=var3
Right now my page has the following code on it, but I am very new to JS and not sure if this is correct:
<!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>
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
this.document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&path=" + Path.content;
}
</script>
</head>
<body>
Line of text
<script>
if (location.search.indexOf("concept") !== -1) refresh();
</script>
</body>
</html>
This gives me the following error with no changes to my url:
reflow: 0.1ms
reflow: 0.11ms
reflow: 0.14ms
1406128139877 Services.HealthReport.HealthReporter WARN No prefs data found.
Use querySelector instead of getElementByName, and instead of concept.value, use concept.content. So your code would look like this:
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&iapath=" + path.content;
}
</script>
Also, iapath.content is an error, use path.content, that's your variable's name.
In addition, you have to call the method refresh somewhere; otherwise it won't run:
<body>
Line of text
<script>
if (location.search.indexOf("concept") === -1) refresh();
</script>
</body>
This piece of (static) html works perfectly on my local server on all browsers I have access to (chrome, firefox, IE...):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<title>Test</title>
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&iapath=" + path.content;
}
</script>
</head>
<body>
Line of text
<script>
if (location.search.indexOf("concept") === -1) refresh();
</script>
</body>
</html>
Related
the function setImg() if called with an argument is not running but if no argument is passed then the function runs what m i doing wrong please help.
<!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" />
<title>Untitled Document</title>
<script type="text/javascript">
function setImg(p)
{
window.alert(p);
document.getElementById('img').innerHTML ="<img src=p width='100' height='105'>";
}
</script>
</head>
<body>
load image
<div id="img">
</div>
</body>
</html>
You are missing the quotes for the src plus you should break up the string and add the variable to prevent it reading p as text.
Update the JS to the following:
<script type="text/javascript">
function setImg(p)
{
document.getElementById('img').innerHTML ="<img src='" + p + "' width='100' height='105'>";
}
</script>
Plus in the HTML you need to be careful with quotes:
load image
<!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" />
<title>Untitled Document</title>
<script type="text/javascript">
function setImg(p)
{
window.alert(p);
document.getElementById('img').innerHTML ="<img src=p width='100' height='105'>";
}
</script>
</head>
<body>
load image
<div id="img">
</div>
</body>
</html>
Well your were closing html attribute accidentally, you should use ' single-quotes instead.
Small mistake of quotes
change
load image
to
load image
I'm trying to create a simple widget Backbase, however, shows me an error ReferenceError: requireWidget is not defined. I think that it is associated with RequireJS but his hook itself does not do anything. Maybe someone knows how to deal with it?
index.html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:g="http://www.backbase.com/2008/gadget" xml:lang="en">
<head>
<title>Todo Widget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<g:preferences>
<g:preference name="limit" label="Todo's Limit" type="text" default="5" viewHint="none" />
</g:preferences>
</head>
<body g:onload="requireWidget(__WIDGET__, 'todo')" class="todo-widget">
<h1>Todo Widget</h1>
</body>
</html>
And js file
define(["jquery"], function($) {
"use strict";
var self;
function Todo(widget) {
self = this;
self.widget = widget;
self.$widget = $(widget.body);
return self;
}
Todo.prototype.init = function() {
window.alert('it works!');
}
return function(widget) {
var todo = new Todo(widget);
todo.init();
}
});
Basically you need to reference the the require conf file in your HTML FILE from the launchpad.
**<script src="../../../launchpad/conf/require-conf.js"></script>**
the path ../ depends on the your path of the source folder.
You can also write the Widget without the require js as below with your own function
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:g="http://www.backbase.com/2008/gadget" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />
<title>Hello World</title>
<g:preferences>
<g:preference name="FontSize" type="range" min="8" max="24" step="2"
default="12" label="Font size" onchange="applyFontSize(__WIDGET__)"
viewHint="user" />
</g:preferences>
<script type="text/javascript">
function applyFontSize(oWidget) {
oWidget.body.style.fontSize=encodeURIComponent(oWidget.getPreference('FontSize'))+'px';
}
</script>
</head>
<body g:onload="applyFontSize(__WIDGET__)">
<p>Hello World</p>
</body>
</html>
Also you can register on the http://my.backbase.com.. to have access to more documentation
I'm trying to redirect with javascript after a 3-second delay, but my code currently does nothing. index.html is supposed to redirect to menupage.html after a 3-second delay, but nothing happens. menupage.html has 4 buttons on it: "Device motion" uses Phonegap's accelerometer and compass to show the device's speed and direction, and the other 3 just open new pages in Phonegap's in-app browser. Here is the code:
EDIT: It was just a file location error. The redirect works. Thank you!
<!--index.html-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
<head>
<meta charset="utf-8" />
<title></title>
<link href="JQueryMobile/jquery.mobile-1.2.0.css" rel="stylesheet" />
<script src="JQueryMobile/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="JQueryMobile/jqm-docs.js" type="text/javascript"></script>
<script src="JQueryMobile/jquery.mobile-1.2.0.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles/styles.css" />
</head>
<body onload="redirect()">
<img id="load-img" src="loading.jpg" />
<script src="scripts/scripts.js"></script>
</body>
</html>
<!--menupage.html-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
<head>
<title>Menu</title>
<script type="text/javascript" src="phonegap.js"></script>
<link href="styles/styles.css" rel="stylesheet" />
</head>
<body>
<button id="devmotion" onclick="getMotion()">Device Motion</button>
<button id="ucla" onclick="openUCLA()">UCLA</button>
<button id="espn" onclick="openESPN()">ESPN</button>
<button id="google" onclick="openGoogle()">Google</button>
<script src="scripts/scripts.js"></script>
<script src="scripts/jquery-2.1.1.min.js"></script>
</body>
</html>
<!--devicemotion.html-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=1.0" />
<head>
<title>Acceleration and Compass Direction</title>
<script type="text/javascript" src="phonegap.js"></script>
<link href="styles/styles.css" rel="stylesheet" />
</head>
<body>
<div id="accel"></div>
<div id="compassdirection"></div>
<button id="goback" onclick="backToMenu()">Back</button>
<script src="scripts/scripts.js"></script>
<script src="scripts/jquery-2.1.1.min.js"></script>
</body>
</html>
<!--scripts.js-->
// JavaScript source code
function redirect() {
window.setTimeout(function() {
window.location.replace("menupage.html");
}, 3000)
}
function getMotion() {
window.location = "devicemotion.html";
//window.open("devicemotion.html", "_self", "location=yes");
navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);
navigator.compass.getCurrentHeading(compassSuccess, compassError);
}
function backToMenu() {
window.location = "menupage.html";
}
function accelerometerSuccess(acceleration) {
acclrtn = 'Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n';
document.getElementById("accel").innerHTML = acclrtn;
};
function accelerometerError(error) {
alert("Accelerometer error: " + accelerometer.code);
}
function compassSuccess(heading) {
direction = "Direction: " + heading.magneticHeading;
document.getElementById("compassdirection").innerHTML = direction;
}
function compassError(error) {
alert("Compass error: "+error.code);
}
function openUCLA() {
window.open('www.ucla.edu', '_blank', 'location=yes');
}
function openESPN() {
window.open('www.espn.com', '_blank', 'location=yes');
}
function openGoogle() {
window.open('www.google.com', '_blank', 'location=yes');
}
it should be
window.location.href = "http://yoursite.com/menupage.html";
Update
Seems that the logic that leads up to the redirect is not working. You are defining an onload handle in the body tag <body onload="redirect()">, the catch is that when that command executes, the redirect function does not exist yet because you are loading the js at the end of the document (which is correct). You could do 2 things.
Given that your scripts are at the end, calling a function at the end of the script would only be executed after the browser has downloaded html and js, behaving similarly to an onload event.
// At the end of scripts.js
// ... omitted for brevity ...
function openGoogle() {
window.open('www.google.com', '_blank', 'location=yes');
}
// simply call the function
redirect();
To catch the window.onload event properly with cross browser compatibility is known to be a nightmare. Fortunately jQuery fixes this so you could use its initializer in case you have it or can include jQuery.
$(function(){
// this only happens when the document is ready!
redirect();
});
Finally your redirect function should look something like this
function redirect() {
window.setTimeout(function() {
window.location.href = "menupage.html";
// if you need to replace a part of the current url
// for example going from http://example.com/summer/index.html
// to http://example.com/winter/index.html you can
// window.location.href = window.location.href.replace('summer', 'winter');
}, 3000)
}
Have you tried using php to redirect? I believe it would be much easier to use.
header( "refresh:3;url=menupage.html" );
hi2all i write code which change the color of webpage when the user click the div
but doesn't work here is my code what's wrong with it
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
<script type="text/javascript">
var x=document.getElementById("m");
x.addEventListener("click",function{
document.body.style.backgroundColor = "red";
});
</script>
</head>
<body >
<div id="m">kfjgflg</div>
</body>
</html>
You should use something such as:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
</head>
<body>
<div id="m">kfjgflg</div>
<script type="text/javascript">
var x=document.getElementById("m");
x.addEventListener("click",function(){
document.body.style.backgroundColor = "red";
});
</script>
</body>
</html>
Because you have two problems in your original code:
Is missing a important () after the token "function".
The Javascript only recognizes a element after the page or element has ready. In this case, the element only is read to be recognized if your code has after the Javascript Codes that recognizes it.
The code above fixes this.
A important observation: In some IE's, this code can not work, because of the use of x.addEventListener, in this case, you can transform the anonymous function in a normal function (with a name) and listen with addEventListener (if available) and onclick (recommended for old IE's).
In this way,the code looks like:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
</head>
<body>
<div id="m">kfjgflg</div>
<script type="text/javascript">
function changeColor(){
document.body.style.backgroundColor = "red";
}
var x=document.getElementById("m");
if(!!x.addEventListener){ //If exists
x.addEventListener("click", changeColor);
}
x.onclick = changeColor; //It's a property, and ALWAYS can be set (but in some cases is not recognized)
</script>
</body>
</html>
Here is a working example with this code: http://jsfiddle.net/fjorgemota/qCXH3/
If you had opened your JavaScript error console it would have told you that you cannot access the property/method addEventListener of undefined.
You need to look for the element m after the DOM tree has been built. Either place into a function which gets called on DOMContentLoaded:
document.addEventListener('DOMContentLoaded', function() {
/* ... */
}, false);
or place your script at the end of your <body>.
The send page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script>
function send() {
var chinese = document.getElementById('chinese').value;
window.location = 'receive.html?' + chinese;
}
</script>
</head>
<body>
<input id="chinese" type="text" name="chinese" value="" />
<button onclick="send()">Submit</button>
</body>
</html>
The receive page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script>
window.onload = function () {
var chinese = location.search;
document.getElementById('chinese').value = chinese;
}
</script>
</head>
<body>
<input id="chinese" type="text" name="chinese" value="" />
</body>
</html>
The problem is that the receive page does not receive/display the Chinese characters correctly. For example, instead of 首页 it displays ?%E9%A6%96%E9%A1%B5, though it does display well in the query string in the browser address bar.
The value should be URI-encoded before you form the URL:
window.location = 'receive.html?' + encodeURIComponent(chinese);
Now that may not be all you have to do, because it's possible that the server could be causing problems, but you generally want to do that encoding anyway with input provided directly from an text field.