I want to display to the user a message that says "please enable JavaScript" in the case that JavaScript is disabled. I want that message, and nothing else to be displayed when JavaScript is disabled.
So, to do this, I can put the message in the DOM and hide all other elements with display:none. Then in JavaScript I can set the message to display hidden and show all other elements.
But I get a flicker with this approach. The error message shows up for a while (especially on mobile browsers) before it gets hidden.
How can I minimize the time the error message is displayed for?
You're looking for the <noscript> tag.
Inline javascript has to run before the rest of the document is loaded. You can use this behaviour to add style to the page to hide the desired element, before the element is loaded. This should theoretically stop FOUC across all and every browser (including mobile). Here's an example of a standalone HTML that shows a message to those with no javascript. This technique also takes care of what Hussein was mentioning about Firewalls blocking javascript:
<!doctype html>
<html>
<head>
<title>No FOUC</title>
<script type="text/javascript">
document.write('<style type="text/css">#no-js { display: none; }</style>');
</script>
</head>
<body>
<div id="no-js">You don't have javascript, BOOOO</div>
</body>
</html>
You can do this. If JavaScript is disabled it will show the message "JavaScript Disabled"
<p id="jsDisabled">JavaScript disabled.</p>
<script type="text/javascript">
function hideScriptDisabled() {
document.getElementById("jsDisabled").display = "none";
}
hideScriptDisabled();
</script>
If that is creating a flickering problem, use something like this,
document.write(".jsDisabled { display: none; }");
See 1 Way To Avoid the Flash of Unstyled Content
To avoid javascript disable problem.
before starting any writing on your webpage just put the below code.
<!-- saved from url=(0014)about:internet-->
You have to never ask any question to end user.
First try it.
You really can't. The flicker is just the way it is...especially on slow mobile devices (namely Nokia...OH HOW I HATE NOKIA!)
The only other option is to load a splash page first. In the HEAD add a meta refresh of several seconds that will refresh to a 'turn on javascript error'. On the BODY, add a javascript redirect that should trigger immediately.
You will still have a flash, and of course, one more page request to the server. But it may be a 'prettier' flash.
Related
Is there any tricks to hide the src url in iframe? Or maybe encrypt a part of the external url?
TLDR: No, You cant.
You can prevent it appearing at browser page source using JavaScript. But people still can see it with Inspect Element option.
And if you encrypt the URL, it won't work. HTML src must have a specific URL/File path. It can't understand encrypted text.
Still, If you want to hide it from page source, Try this:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<iframe id="extframe" src=""></iframe>
<script src="script.js"></script>
</body>
</html>
JavaScript at script.js file:
var iframeUrl = document.querySelector('#extframe');
iframeUrl .setAttribute('src', 'https://stackoverflow.com/');
You can't. If the URL isn't in the HTML, how would the browser know where to get it?
One thing you could try is to obscure it to make it slightly harder for someone to find it. You could have the src attribute be blank and then when the document is ready fetch the URL value from the server in a separate AJAX request and update the iframe tag to include that value in the src.
This would be a fair amount of work, however, and wouldn't really accomplish anything. The only thing it would prevent is somebody finding it by viewing the page source. They can still look at the "current version" of the HTML in any web browser's debugging tools. (Right click on an element and inspect it, which is nearly ubiquitous at this point.) Or any other normal traffic-sniffing tools will see it plain as day.
Ultimately, if the web browser needs to know a piece of information, then that information needs to be visible on the client-side.
I'm making a chrome extension that loads an <iframe> of another site onto the New Tab page. Right now I'm loading YouTube's subscription page (don't worry about the Same-Origin issue, I solved that already), but now I'm trying to cut everything out of the page except the #content element (the subscription feed element).
Here's my code:
Background.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<iframe id="left" src="left.html" name="left"></iframe>
<iframe id="right" src="right.html" name="right"></iframe>
</html>
Left and Right .html
<!DOCTYPE html>
<html>
<body>
<input type="button" value="Load new document" id="loader">
</body>
<script type="text/javascript" src="window.js"></script>
</html>
Window.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("loader").addEventListener("click", loadUrl);
});
function loadUrl()
{
window.location = 'https://www.youtube.com/feed/subscriptions';
[].forEach.call(document.querySelectorAll(!'#content'),function(e){
e.parentNode.removeChild(e);
});
return false;
}
As you can see, right now I'm loading it in with a button. Once it's pressed, it loads YouTube and should cut out all the html except #content, but it's not. Is there another way to solve this, possibly with jQuery? Thanks!
document.querySelectorAll(!'#content')
won't meet your requirements, you should use the following instead if you do want to remove all elements except #content.
document.querySelectorAll('*:not(#content)')
#content isn't accessible to document, because the global document is on a different page - the page containing the iframes, but not their contents. Moreover, document.querySelectorAll(!'#content') is not a valid selector string - that will be interpreted as document.querySelectorAll(false) because ! of a non-empty string returns false.
You're going to have a hard time getting access to the contents of an iframe, just in general. Most browsers, like Chrome, won't event load the contents of an iframe if X-Frame-Options is set to SAMEORIGIN, which, for youtube, it certainly is.
Supposing you're getting around this (with a reverse proxy, perhaps?), you can get the contents of an iframe using JavaScript like so:
iframe.contentWindow.document
You can then use querySelector and friends on the iframe:
iframeDocument.querySelector('#content')
And if you want to cut out a node, you should remove() it:
iframeDocument.querySelector('#content').remove()
Now, having said all of that:
Don't do this.
You're abusing iframes, which requires some very creative (read: brittle, hacky) code, and Youtube certainly has a public API from which you can get access to someone's Youtube feed - and in a way that Youtube is far less likely to block by tightening security, or even by accident. (Suppose the HTML on their page changes, so #content contains everything. Or suppose they decide to check that the correct origin is requesting the page with JavaScript, and block you.)
What you want, you should use Youtube's API for.
I think I might be going crazy at this point. I had an ASP page working yesterday, and came in today to Firebug telling me it cannot detect the JavaScript on the page. Love it when things change after not touching them.
So I start trying to figure out what is happening. I tried slimming down the code, this answer, restarting Firefox, saving the page under a new name and loading the new one, and adding a ridiculous amount of code I generally consider unnecessary. I even tried removing everything from the page and changing it to this:
<script>
alert("yay");
</script>
Does not trigger alert, and Firebug says "No JavaScript on this page". I've been looking for explanations for almost 2 hours and cannot figure out what is happening. I know I did not deactivate anything because other pages will show JavaScript and function properly. I also know that no add-ons are causing it.
I am using Firefox 28.0 (also tried on 27.0.1). Opening the page in Chrome triggers the alert.
(Damn I meant to post this as a comment).
As you responded I'll re-popualate...
I create jsfiddle,
<body>
<script>
alert("yay");
</script>
</body>
Also ensure your browser has javascript enabled.
You should follow the instructions on the Firebug's first aid page.
I assume it's either some Firebug setting or a conflict with another extension. (I see at least YSlow and FlashFirebug installed.)
To check that you can create a new profile and just install Firebug.
Closing the tab and opening the same link in a new tab seemed to resolve the issue.
I'm not sure if any of the prior attempts factored in, so I will list them as well. To be clear, none of these worked, but may have paved the way in some fashion.
Restarting Firefox
"Clear Activation List" on Firebug
Save page under new filename and load the new page
Uninstalling add-ons (all of them)
Create new profile and load page on that profile
Add a <!DOCTYPE html> to the top
Add type="text/javascript" to script tags
Add charset="utf-8" to script tags
Add <meta charset="utf-8"> in <head>
I have a small html/css site powered by jQuery, generated with PHP, you can see it in action here.
All the idea about the site is that once loaded, it works without the internet connection, if the browser supports javascript, that is.
You can see it has a PRINT button ready, but it doesn't work yet. I want to make it work, but I'm not sure what is the best approach, or any approach, thereof.
I need to print the content area only, that means the header (song title) and the paragraph (song lyrics). Probably add a header/footer to the paper, so that the site name is printed too.
On other sites it usually works in the way that the PRINT button opens up a new window, which loads for example /print.php?id=40, but I don't really want to do that here, as it requires an active internet connection.
In case the print feature cannot be done without an internet connection, an answer which at least describes on how to best approach this with reloading the site will still be acceptable.
Use a print stylesheet to specify element visibility for printing.
<link rel="stylesheet" type="text/css" href="styles/print.css" media="print">
... and in print.css
#hideThisElementInPrint,
.andThisOneToo {
display: none;
}
I have an issue with Cross-Browser native events vs CallBack events.
I have an HTML link "Click Me" with a given href="". On dom:loaded I attach a function to this link (to do Ajax Stuff).
JavaScript code is loaded at the end of the page to follow YSlow Recommandation.
Issue:
If you load this page really quickly (pressing F5) then click on link then
the alert() is not called
the link is followed (reloading the page)
It happens when the server lags. In fact the page has not finished loading and the browser execute the code.
Demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
Click Me
<!-- According to YSlow Recommandation load at the bottom -->
<script src="../js/lib/prototype.js" type="text/javascript" language="JavaScript"></script>
<script>
/* <![CDATA[ */
document.observe('dom:loaded', function() {
$('action').observe('click', function(event){ alert("click"); Event.stop(event); });
});
/* ]]> */
</script>
</body>
</html>
Turn Around:
A turn around is to add onClick="return false;":
Click Me
It works for lags but not for quick click. And I don't like this kind of turn around because my goal is to remove the onclick on all <a href="">
You could look into this:
JQuery has a handy little function that
launches your javascript as soon as
the Document Object Model is ready…
which happens before the page has
finished loading.
$(document).ready(function(){ //
Your code here...
});
via
You could also put a big disabled div in front of everything while the page is loading to forbid clicking, but I wouldn't recommend it.
Not sure if I got your question right, let me know if I didn't
We have done many many test on our CMS on many browsers.
Sorted by speed:
JavaScript can't execute before a really fast click
onclick="return false" works fine in most case
JavaScript doing 2.) onLoad is too slow but could be enought
DIV using as shield brings other issues and is not a good choice
It seems like you have things pretty well in hand, and all you're looking to do is create some links which do nothing in areas where graceful degradation is not possible.
In these cases I suggest a link with the following format:
Linktext
This link should functionally do absolutely nothing with javascript enabled or disabled.
Important Notes
The number zero in the void is absolutely necessary. Internet Explorer will complain otherwise.
The use of "javascript:void(0);" is strongly discouraged by Microsoft because odd things can happen. To avoid the majority of the bugs, do not wrap anything but text in your void(0) links.
Before you make a decision make sure to carefully consider if adding "javascript:void(0);" is really a better solution than adding an onclick which returns false.
On removing the href attribute:
Removing the href attribute from a link is valid XHTML. Despite being valid XHTML, your link will lose its automatic link styling. No more underline, no more colors, no more hover, and no more automatic color change if the link is visited.
You can't fix the lack of styles with CSS either due to the spotty support of :hover in Internet Explorer.