I need to load some data on each login, but this php script take some time to run and I don't want users to wait for a minute on blank screen.
I would like to trigger data loading process and redirect user to home as a normal login.
I cannot use exec because restrictions of hosting provider, so I am trying to use ajax for execute background.php and javascript for redirect. (windows.location)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"> </script>
</head>
<body>
<script>
$(function ()
{
$.ajax({
url: 'http://myweb.com/background.php'
});
});
window.location="http://myweb.com";
</script>
</body>
if I comment windows.location line, then background.php script finish ok, but on any kind of redirection (header location in php, windows location in javascript), script does not execute.
I need to redirect to home (or any other part of my web site) without interrupting background.php execution.
¿Any idea?
Related
I am working on a project where I have to add external HTML files as a header and footer in the main (Index.html) page. I tried below script, but it didn't work
<!DOCTYPE html>
<html lang="en">
<head>
<title>sample test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#header1').load("mainheader.html");
});
</script>
</head>
<body>
<div id="header1"></div>
</body>
</html>
You can use iframe tag to load another html file or url.
<iframe src="your-html-route/another.html"></iframe>
Use JavaScript and work with components. Then you can work with modules to import or export a component and add HTML with
document.queryselector('#header').innerHTML = '<header>content</header>';
PHP is better for such a thing if you ask me. Make you header and footer in another .php file and include them on every page where you want use them.
Your script $('#header1').load("mainheader.html"); is correct. The fact is that the load() method (just like ajax) works exclusively on the SERVER. In order to load an external page to your tag using the load() method, you need to put your project on the server, or deploy a local server on your computer. There are many programs for this, for example: OpenServer, Denwer, WampServer, XAMPP, etc. I advise you to use OpenServer. It's free and easy to use. After you deploy your local server, you push your project to your server and the load() method will load your external html file.
If it's only a short bit of code then you could use this:
<pre>
<code>
HTML code goes
here.
</code>
</pre>
I am new to JS. I made a simple Snake game using vanilla JS in VS Code. There is minimal CSS in the code so I put that in the html.
When I open the index.html from VS Code with Live Server (http://127.0.0.1:5500/) it works fine.
But when I open it from the file explorer (file:///D:/Prog/Javascript/VanillaJS_projects/Snake/index.html) only the html gets loaded, no Snake and Food pieces appear. And the same happens if I try to open it with htmlpreview.github.io
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake</title>
<script src="game.js" defer type="module"></script>
<style>
...
</style>
</head>
<body>
<div id="game-board"></div>
</body>
</html>
It doesn't matter what browser I use, I get the same result.
What is the difference? Why won't it load properly?
You browsers honor Content Security Policy.
If you open file:/// URLs, you may think of your browser as a poor man's file viewer.
I'm working on a website which requires the user to sign in on a 3rd party website that's displayed on my website within an iframe. I'm trying to extract the html code of that website with jQuery but it doesn't really work. Here's my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Iframe</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
console.log($("#iframe").contents().find("body"));
});
</script>
</head>
<body>
<iframe src="https://www.google.com"></iframe>
</body>
</html>
I'm using google in my example but it's a different website I use. The result I'm getting is this - w.fn.init [prevObject: w.fn.init(0)] - but I can't find the html. Anyone who knows how to do this?
Imagine your site being able to access the content of any iframe you're including. You could simply include websites like facebook, gmail or any banking site where a user is logged in and then steal their personal information. So this is strictly forbidden by default: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
There is an "opt-in" technique, though, where the communication between parent window and iframe is possible. Basically each site/document defines the information to be transmitted and sends it using the window.postMessage() method: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
So if a message is sent from one party
window.postMessage("hello!", "http://example.com");
it may be received by the other one
window.addEventListener("message", function(e) {
console.log(e.data); // prints "hello!"
}, false);
I want to redirect a plain HTML web page to a new URL, but everything I have tried (meta refresh, Javascript redirect) results in the old URL appearing in the address bar of the new page, even after clearing my browser cache. .htaccess redirects sometimes work but are complicated by the fact that the old page is already the target of a redirect from another domain. I do not have access to the hosting account.
Can anybody suggest a way to make the new URL always appear on the address bar for the new page? Thanks a lot.
Using the meta refresh tag should work fine.
<meta http-equiv="refresh" content="0; url=http://example.com/" />
Note: Place it in the head section.
You may also want to do a javascript redirect as the W3C doesn't recommend the meta tag approach, although it may not work on all mobile browsers. Along with a fallback text link, that would make your page similar to:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="1; url=http://example.com">
<script type="text/javascript">
window.location.href = "http://example.com"
</script>
<title>Page Redirection</title>
</head>
<body>
<!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
If you are not redirected automatically, follow this <a href='http://example.com'>link to example</a>.
</body>
</html>
Many thanks to the answers from this previous answer: Redirect from an HTML page
I've been having issue linking in the JQuery api into my html page. I've spent a lot of time trying to figure it out myself, but haven't made any progress, and would really appreciate anyone's help! Like I mentioned in the title, it works fine when I link to a hosted version of JQuery, but when I try to use a local version, I have no success (I need to work locally for what I'm using it for). Side Note: I downloaded the files directly from JQuery's site, and put them in the root folder for simplicity.
Please see the code below...
This does not work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
</head>
<body>
</body>
But this does work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
</body>
Maybe it's the order the scripts are coming in - your working version has jQuery first, then mobile, while the non-working one has the opposite. If that doesn't fix it, double-check that your file paths are all correct - the way it's written, your html file must be in the same folder as the scripts. If it's not, try prepending a slash: <script src="/jquery-2.2.3.js"> to force it to look at the root folder.
One way to confirm whether that's the issue is to check your browser dev tools. If you're in chrome, right click -> inspect element, and find the Network tab. Reload your page while you've got that open and see if your page is successfully loading the scripts. If you see the names of those scripts in red, it means they weren't found or couldn't be loaded.
Last thought: if you're working on your local site via opening a file:// path, the JS you can use will be restricted; this is a security feature. To get around it, run your site on a local server. Mac OS X has a built-in one, or you can use PHP or python to get one up and running immediately from the command line, or install a library like pow or serve. Google around for 'local web server setup', there are tons of options.