after to make some research I took the measures to guarantee that the JS will be loaded before trying to run it but... it won't work!
This works:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1" charset="utf-8">
</head>
<html>
<body>
<script type="text/javascript">
function initialize() {
console.log('foo')
}
window.onload = function() {
initialize();
};
</script>
</body>
</html>
But this doesn't:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1" charset="utf-8">
</head>
<html>
<body>
<script type="text/javascript" src="test.js">
<script type="text/javascript">
window.onload = function() {
initialize();
};
</script>
</body>
</html>
test.js:
function initialize() {
console.log('foo')
}
I don't get any error. It just doesn't work. What am I doing wrong?
Thanks!
You need a closing script tag for the tag that is calling the external js file.
<script type="text/javascript" src="test.js"></script>
Related
I want to open a new window on click of a button. It is opened successfully but I can't write data and set title simultaneously.
Does anybody have any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title And Data Both</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var filename ="console.log";
var newwin = window.open("","","width=200,height=100");
newwin.document.title="Title";
newwin.document.write("<h1>XXXX</h1>");
});
});
</script>
</head>
<body>
<button type="button">Get Substring</button>
</body>
</html>
The document.write() overwrites all existing HTML(including the title).
One way you could do it, is to set the title after the write.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title And Data Both</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
var filename = "console.log";
var newwin = window.open("", "", "width=200,height=100");
newwin.document.write("<h1>XXXX</h1>");
newwin.document.title = "Title";
});
});
</script>
</head>
<body>
<button type="button">Get Substring</button>
</body>
</html>
When having the following HTML page (index.html)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
console.log("iframe loaded");
});
});
</script>
</body>
</html>
and the following iframe.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>
the console output will look like:
However, the log "iframe loaded" is missing. It seems that .on("load") is not getting fired on the iframe.
Does anyone know why?
Edit:
Of course I am having JavaScript activated (otherwise I wouldn't see any log messages)
I can not edit iframe.html so using postMessage etc. is not a workaround for me
I have tested this in the latest FF (47.0a2) and Chrome (49)
The Code is working perfectly . Maybe the path that you provided for iframe is wrong. Check if they are in the same folder
Check if javascript is enabled in your browser
Edit:
or try to replace your index.html code with:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
<script type="text/javascript">
function handleOnLoad(el) {
// el is the actual iframe
console.log("iframe loaded");
}
</script>
</head>
<body>
<iframe src="iframe.html" onload="handleOnLoad(this)"></iframe>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
// console.log("iframe loaded");
});
});
</script>
</body>
</html>
Your code <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
console.log("iframe loaded");
});
});
</script>
has to be inside iframe.html
So your pages look like below post modifications.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>
iframe.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$(window).on("load", function(){
console.log("iframe loaded");
});
});
</script>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>
I want to get data from other page with js or jquery or ajax but not php. I just found a sample on stack overflow. (here is the link) But when I write these codes on my index.html file, it doesn't work. I don't understand reason. Here is my codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type=”text/javascript”>
var url='http://query.yahooapis.com/v1/public/yql?q=select * from html where url=\'https://stackoverflow.com/\' and xpath=\'//div[#id="question-mini-list"]//h3//a\'&format=json&callback=?';
$.getJSON( url, function(data){
$.each(data.query.results.a, function(){
$('body').append('<div>'+this.content+'</div>');
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
it works as it is...
var url='http://query.yahooapis.com/v1/public/yql?q=select * from html where url=\'http://stackoverflow.com/\' and xpath=\'//div[#id="question-mini-list"]//h3//a\'&format=json&callback=?';
$.getJSON( url, function(data){
$.each(data.query.results.a, function(){
$('body').append('<div>'+this.content+'</div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
I solved my problem these codes, thank for your help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var url = 'deneme.html';
$.get(url, function(response) {
$('div#external').html($(response).find('#content>ul>li').html());
});
});
</script>
<style> body, html{padding: 0; margin:0;}</style>
</head>
<body>
<div id="external" >
</div>
</body>
</html>
I have setup my account on scriptcam, but can't get camera to load. I've created a test page to just get the video player up, and that won't work. I can't even get the errors to load, so I suspect that it's something to do with the scriptcam.js files not even being loaded? See below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>iseYoo video test</title>
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script language="JavaScript" src="scriptcam.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#webcam").scriptcam({
onError: oopsError,
showDebug: true
});
});
function oopsError(errorId,errorMsg) {
alert(errorMsg);
}
function showCurrentVersion() {
alert($.scriptcam.version());
};
</script>
</head>
<body>
<div id="webcam"></div>
</body>
</html>
I'm trying to do a very basic jquery tutorial but I'm not able to get it to work.
I'm calling the jquery library from google and then I try to create a script inside html.
If I do the same in a .js file I wouldn't have any problem.
What am I missing here?
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
Link
</body>
</html>
You need to split this up:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
...into two script elements:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
In the snippet you gave, the code within the <script> element won't be evaluated because the browser is only evaluating the contents from the src attribute and ignoring everything else.
Move your scripts into the head element like this:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
alert("Hello world!");
});
});
</script>
</head>
<body>
Link
</body>
</html>