I've a simple web-application, which consists of 3 simple pages
a.html
b.html
c.html
<!-- a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
<!-- b.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
a.html
<br />
c.html
</body>
</html>
<!-- c.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
As can be seen from the above code, a.html has a link to b.html, b.html has a link to both a.html & c.html and finally, c.html has a link to b.html.
All of the pages will be hosted on the same domain, and I want a very simple thing. All I want is to execute a callback whenever browser's back/forward button is pressed (specifically before navigating to the new page), and in the callback I want the page to which we'll be navigating. And I don't want to update the browser's history while achieving the above (I don't want to ruin the user's experience, updating browser-history will result in unexpected navigation for the user)
The solutions that I tried:
performance.navigation.type
performance.navigation.type == 2 can be used, but it doesn't distinguishes between back and forward button. So it's not of much use for me. Is there any way to distinguish the back and forward button press here?
I don't want to distort this.window.history so that I can get a callback on onpopstate (refer this). Distorting the windows history means ruining the user-experience. Can this be done without distorting the windows history?
I know that using window.history object, I can't find the URL to which the forward/back button will navigate to. (This is because of security). But provided that all of my pages are on the same domain, can I somehow get the url to which fwd/back button will be taking me to. I'm mostly concerned about b.html. While I'm on b.html the forward/back button can take me to either a.html or c.html, how do I detect this before actual navigation happens, so that I can get a callback at this point and execute it.
I tried using JQuery-Mobile but was stuck and posted it as a separate question. Though I'm not sure how JQuery Mobile achieves it and if it will distort the browser's history.
I tried using React-routers, but they are more suited for a single-page-application, and so not much help from there also. Can this be done using any react-concepts?
Related
I have a simple presenter when my PC is not compatible with a data projector. I make a print-screen of my local PC and upload it to my web page via FTP. It is working automatically, no problem (Linux).
But I would like to change following file to reload only when the program sees that the picture "web_presentation.png" has been changed (uploaded anew). The problem is that this page is constantly blinking while reloading every 10 s - it is annoying.
<html>
<head>
<title>web_presentation</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta Name="Keywords" Content="redirect">
<meta Name="description" Content="redirect">
<meta http-equiv="Refresh" content="10; URL=web_presentation.htm">
</head>
<BODY>
<img src=web_presentation.png width=100%>
</body>
</html>
This page is displayed on a second PC, which is connected to the data projector (usually windows).
I spend a few hours to figure out how to get modification time (lastmodified) of web_presentation.png and reload it according to this information.
If possible, please stick to pure javascript or php (Firefox).
It seems to be much more difficult as I thought it would be.
Thanks :-)
I'm trying to get the Facebook Post embed working on my own site using their JS SDK but it doesn't seem to show up.
Some inline styles on the embedded iframe and the span it encapsulates it, controls the display of the widget.
I found some hacks but they aren't perfect. I used facebook's JS playground on the same code and it works.
There aren't any stylesheet interfering with this file and no extension as well as I checked in firefox and the result was the same.
edit: posting the code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12" async></script>
<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>
</body>
</html>
Kindly see the photo attachment.
Thanks
P.S. Facebook code is directly copied from their docs, HERE
I assume you tried this by just opening the HTML file in your browser. You have to open it using a local or remote server. If i start it with a local server with the exact same code, it works perfectly fine.
For example: https://www.npmjs.com/package/http-server
I'm trying to manipulate DOM elements in the background. What I want to, is to have a YouTube player in the background.html file, which can be manipulated in the popup.html file. However, I'm stuck on how to actually manipulate elements in the background.
background.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Bogus</title>
</head>
<body>
<iframe id="youtubeContainer" height="480" width="480"></iframe>
</body>
</html>
It seems as though, if you want to interact with your background page, you're dealing with a call to chrome.extensions.getBackgroundPage(). However, I'm quite unsure on how to access the DOM once the backgroundPage has been accessed. Hope someone can help!
I have several HTML pages running Javascript and JQuery Mobile, and I want to link to them from another HTML page. My link is setup as:
Hours
and the linking page and the pages being linked to are in the same directory. However, when I access the page through this link, the JQuery Mobile theme is loaded, but any additional CSS changes or any Javascript code doesn't execute. I have several methods set to run on startup, but none execute, not even a simple alert.
When I attempt to access the page directly, everything applies properly and my code executes, but when I try to access it through my HTML link, none of it works. Is there something I am forgetting?
Thanks!
Edit: None of the code is working for any link I link to. Even a simple:
$(document).ready(function(){
alert("Hello world");
});
does not work. I have this added into the other HTML page as:
<head>
<meta charset="utf-8">
<title>Hours</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" rel="stylesheet">
<script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
alert("Hello world");
});
</script>
<style type="text/css">
* {
font-family: "Celeste Mobi Pro", Celeste, serif;
}
</style>
</head>
Neither the CSS font change nor the startup alert works. I've tried this on other HTML pages, so I think it might be the server I'm hosting it on, but I'm not sure.
Second Edit: I just tested it locally, and it works. I'm fairly certain it's the server right now, is there anything I should check?
Third Edit: I've been using the Chrome console to look at the javascript source on the pages being linked to. I have all scripts added through script tags in the head, but for some reason, none of those appear. Rather, the contents of the script tags are those from the page linking to them (and yes, I'm making sure that I'm checking the for the new page, not the old page). When I refresh the page, however, it updates and it seems to work.
According to every data that you provide us, what you are telling us should work. There's no flaw in it.
The only possible error that you may encounter may be that you are using two differents hours.html, and accessing the wrong one through your link.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to detect if JavaScript is disabled?
I need to detect whether javascript is disabled in browser.
To do so I have put an iframe inside the document and refreshing the page in a interval of 10sec. Once script is disabled, it has to redirect the top parent with javascript error URL. Here is my code for iframe:
<!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" />
<base href="http://localhost/test/" target="_top" />
<noscript>
<meta http-equiv="refresh" content="1; URL=http://localhost/test/javascript_error.php" />
</noscript>
<meta http-equiv="refresh" content="10" />
<title>Detect Script</title>
</head>
<body style="text-align:center;">
Detecting whether javascript script is enabled/disabled in the browser.
</body>
</html>
I'm adding the tag to the content of an iframe html and a redirect meta tag, which should load to the top parent location.
Any idea why this does not work?
or how do i get this thing to work?
Thanks
The base tag affects only elements with URLs that appear as the content of an attribute designated to have a URL value, such as href.
The constructive approach to dealing with JavaScript enabled/disabled is to first design a page assuming that JavaScript is disabled, then add JavaScript in a non-obtrusive way.
UPDATE: I see what you are trying to do. The base tag will only work with links. Since this only is done when JavaScript is disabled, the href of the iframe cannot possibly change and you cannot possibly 'programmatically click' a link which may reference to that JavaScript error page, there is really no possible solution using base. Refer to my solution below.
The reason that your code doesn't work is because most browsers would not render 2 <meta http-equiv="refresh"> tags separately.
So instead of writing <meta http-equiv="refresh" content="10" />, just write:
<script type="text/javascript">
setTimeout(function () {
window.location.reload();
}, 10000);
</script>