I see SWFs download twice in IE, but not in Chrome. I'm using IE 11. I can see the download requests in the F12 dev tools Network tab and in server access logs. Below is a simple example that exhibits the problem. I'm using swfobject 2.2. I've tried calling swfobject.switchOffAutoHideShow() before calling swfobject.embedSWF(), but that doesn't help.
You can test this by putting the HTML and swfobject.js in the same directory and browsing from the disk, so you don't need an HTTP server to test/reproduce this.
Does anyone know why this happens and how to stop the second download?
<!DOCTYPE html>
<html>
<head>
<title>My Version</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("http://www.adobe.com/swf/software/flash/about/flashAbout_info_small.swf",
"flashInfo", "100%", "100%", "9.0.0");
</script>
</head>
<body>
<div id="flashInfo">
<p>No flash here. Move along.</p>
</div>
</body>
</html>
Related
I am at the start of learning Javascript, but within the first 10min I hit on a Chrome issue. I'm attempting to display the code I wrote with Visual Studio in the Chrome console, but rather than showing the code in the section below the menus 'Element', 'Console', 'Source' etc, the code displays exactly as I wrote it, but in the view panel including all html tags below the menu section 'Apps', 'Bookmarks', 'Customize Links' etc. How do I resolve this, any answers?
I tried to use ctrl-o to open the .js file whilst in Visual Studio and also whilst on Chrome, but only the file path to the .js file opened, and when subsequently clicking on the file it looked like the image below.
chrome not displaying JavaScript code in the location I want it to be
To clarify - you are loading a .js file in the browser which is what is displaying in chrome (the content of that file).
What you want to do is run that js file and have Chrome's JavaScript interpreter (V8) parse that information. To do that, you must add your script to an index.html page and then in index.html, load that e.g something like <script type="text/javascript" src="script.js"></script>
Alternatively, you can just run the JavaScript directly in index.html via
<script type="text/javascript">
// your JavaScript
</script>
You are opening the javascript file directly in the browser, not opening an .html file with a javascript tag. That's why Chrome is showing you the file content.
If you want to execute your javascript code in the Chrome console, paste it directly in the "console" tab of the developer tools.
If you want to execute your javascript code in a web page, you have to create an html file with a script tag loading your javascript code, something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="main.js"></script>
</head>
<body>
</body>
</html>
In order to see your html content on browser you should load .html file instead of loading .js file
you can include your javascript code in two ways
Add your Javascript code inside the script tagcreate a new javascript file with extension .js and add it in your html file
Example1 (Adding Javascript inside script tag)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
console.log("good morning");
alert("good morning");
</script>
</body>
</html>
Example2 (Adding Javascript from external file)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="nameOfFile.js"></script>
</body>
</html>
I have this very simple html file.
<!doctype html>
<html>
<head>
</head>
<body>
<script>alert("hi");</script>
</body>
</html>
This usually runs fine in Firefox and Google Chrome on my laptop. But when I run this in Safari in an iPhone device and Google Chrome on an Android device, the JavaScript code doesn't run. That is, no alert appears. This is extremely unusual for me. Do we need to change JavaScript code when running on mobile devices? What should I do?
(function(){
window.alert('hi')
})()
<html>
<head>
</head>
<body>
</body>
<script src="aJSfile.js"></script>
</html>
Add window to alert so that it says window.alert('hi') also see the core window functions supported by most browsers
https://developer.mozilla.org/en-US/docs/Web/API/Window/alert
In my project I use jQuery.html() to refresh an element on the page. The content is received from the server using AJAX. In FF and IE it is working perfect, but in the Chrome I see that it flickers. I realized that it is not related to AJAX. Problem is that Chrome always gets images from the server even they are not changed. Following example demonstrating it. How to prevent Chrome from reloading images from server?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p id="XXX">
</p>
<script>
setInterval(function () {
$("#XXX").html('This is dynamic content from server with an image <img src="alarms.png">');
}, 1000);
</script>
</body>
</html>
You can check here on how to optimize caching the content. You could also try preloading the image first here.
Try putting window.onload = before your setInterval function. It will load the function when the webpage is loaded.
I'm definitely not a newbie to scripting, but this just boggles my mind. I want to invoke a function on a button click, so I first wanted to grab the buttonclick event and test that with a simple window.alert. So I just wrote the html document below.
<!doctype html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
alert("clicked!!");
});
});
</script>
</head>
<body>
<form id="send-message-area">
<input type="button" id="sendButton" value="Send Message">
</form>
</body>
Unfortunately, nothing happens. At all. Since this is fairly simple code, I have no clue why this wouldn't work.
Your script tag to pull in jQuery is using the (Common|General) Internet Syntax Scheme. This tells the browser to use whatever scheme was used to load the page in loading the script. It is helpful for sites which respond to both http and https.
If you are viewing your file locally using the file:// scheme, then you should see an error that $ is not defined. This is because the script does not live at:
file://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
Please use this src in the script tag when loading locally:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Path to src should be complete if you have hosted it somewhere.You have not added correct path to jquery library. Everything will work accordingly once you do that.
<script src="http://code.jquery.com/jquery-latest.js"></script>
Demo
According to your url starting with // the browser tries to load that file from your local file system if you're locally testing your site using an url like file://. In that case you're not loading jQuery, so the $ is undefined and your code never executed.
Use the script tag like that for local tests:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
If you run your site on a web server, the cdn-style starting with // will work again.
Code looks fine
I think you are testing in IE < 9 (jQuery 2.x not supporting IE 8)
Please change the browser or load jQuery version like 1.9 and test it
You have to update query script src to 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'
I recommend to download the jQuery script then add it to your project locally instead of the remote one
use <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"> and practise to insert html tag
HTML:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
alert("clicked!!");
});
});
</script>
</head>
<body>
<form id="send-message-area">
<input type="button" id="sendButton" value="Send Message">
</form>
</body>
</html>
You are missing to include http:/ in your script src.
Either change your script tag like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
or download the Jquery file and refer locally.
Change your path to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
and try to use jquery 1.10 for less than ie9 browser
<!--[if lt IE 9]><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><![endif]-->
<!--[if IE 9]><!--><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!--<![endif]-->
I'm just starting to playing around on a Mac for the first time and I have created a very simple HTML page that uses jQuery to do a simple text swap when an h1 tag is clicked.
When I don't view the page through the webserver and just open it directly in Safari (file:///Applications/xampp/xamppfiles/htdocs/test/mypage.html) it works as expected. However, when I try to view through Apache (http://localhost/test/mypage.html) it doesn't work.
Here's the code:
<html>
<head>
<title>My Awesome Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
function sayHello()
{ $('#foo').text('Hi there!');
}
</script>
</head>
<body>
<h1 id="foo" onclick="sayHello()">Click me!</h1>
</body>
</html>
Am I missing something on the Mac? Wouldn't be an Apache setting since its client-side code.. right?
I should probably also mention that I loaded XAMPP to run Apache and MySQL. I have tested Apache to ensure its working using a simple PHP file.
Steve
Use Firebug and access the page. One things that might be a culprit is that the web server cannot open jquery.js file because of file permission. Firebug will show if the jquery loaded in page, even you can add the jQuery code on-the-fly in the Console tab.
If you access it using Safari, use Web Inspector and see the if any error showed in Console tab.
One last thing, make a habit to avoid onclick, do this instead:
<script type="text/javascript" charset="utf-8">
function sayHello()
{
$('#foo').text('Hi there!');
}
//wait DOM loaded
jQuery(function($){
$('#foo').click(function(){
sayHello();
});
});
</script>
Also, it's better to put the js code near the page end, before </body>, so it would not block concurrent page element's loading.