I'm trying to headlessly test a website that our team built using RequireJS. Basically we load all the content dynamically via requireJS then use JS to respond to events and dynamically render content.
When I point phantom JS to our server and render a screen shot, I get a white screen, javascript is enabled because when i point it to www.enable-javascript.com I get the message "Javascript is enabled".
Here is our page HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test </title>
<base href="/">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="page"></div>
<script src="lib/es5-shim/es5-shim.js"></script>
<script src="lib/es5-shim/es5-sham.js"></script>
<script src="lib/require.js"></script>
<script src="config/require.js"></script>
<script>
require(['app/boot']);
</script>
</body>
</html>
Phantom JS:
var page = require('webpage').create();
page.open("http://localhost:4567/", function (s) {
page.render('test.png');
phantom.exit();
});
Related
This is a Webpack-generated index.html for an Aurelia page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="assets/favicon_16x16.png" rel="icon" sizes="16x16" type="image/png">
<title>Report NG</title>
<meta content="width=device-width,initial-scale=1" name="viewport">
<base href="">
<script defer="defer" src="runtime~app.ff7b16a6e070e53c8cd6.bundle.js"></script>
<script defer="defer" src="927.e593586868873e353304.bundle.js"></script>
<script defer="defer" src="983.8ddf552f0b4036561207.bundle.js"></script>
<script defer="defer" src="417.0b982aa38fb2bce8d391.bundle.js"></script>
<script defer="defer" src="212.46a12b9521ba6317f9b1.bundle.js"></script>
<script defer="defer" src="app.42fbcddde62f263b1a4c.bundle.js"></script>
<link href="css/983.5102c6f24c10258b523a.chunk.css" rel="stylesheet">
<link href="css/417.78495966cfa48fb59a61.chunk.css" rel="stylesheet">
<link href="css/app.327e04e57f327850ab7d.chunk.css" rel="stylesheet">
</head>
<body aurelia-app="main"></body>
</html>
If I open this index.html on my local machine, the scripts (in the same folder) will be loaded and run.
This is a hand-written MVE index.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MVE_localDataDependency</title>
<script defer="defer" src="data.js" type="module"></script>
<script>
import {read} from "./data"
read()
</script>
</head>
<body></body>
</html>
It will not load data.js (in the same folder) but rather abort with a CORS error. This is the expected behaviour.
... Why are the scripts loaded in the generated page?
Notes:
Browsers may have a global setting to allow loading local scripts, e.g. in Firefox. This does not explain, why the same browser, in two simultaneously open tabs, loads script files for one HTML file but not for the other one.
I double checked that both index.html files appear in the Browser tab as "file:///", so not a case of "your IDE accidentally auto-served this".
Behaviour is identical in both Chrome and Firefox.
I'm a beginner creating an app through jQuery Mobile, i am trying to incorporate a custom theme through theme roller and it prompted me to use these lines of code:
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
I have already put the themes folder in the apps folder however I am trying to figure out how to include these lines within this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).on('mobileinit', function(){
$.mobile.defaultPageTransition = 'slide';
});
</script>
<script src="js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
All while not changing the layout and current look. The end goal is to figure out how to change the background and button colors on my app. Thank you!
I have a Spring boot app with a Thymeleaf template, that is supposed to load a css file and a javascript file.
The CSS file loads, but the Javascript file doesnt, it does not even try to get it from the server. There is no HTTP request for the Javascript, but the requests for the CSS are visible.
Where is my mistake?
I already tried putting the link for the javascript in the header next to the css but that made no difference.
My folder structure is as follows:
resources
-- static
---- bootstrap
------ css
---- js
Here the HTML:
<html xmlns:th="https://thymeleaf.org" lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Title</title>
<link rel="stylesheet" type="text/css" th:href="#{/bootstrap/css/bootstrap_custom.css}" />
</head>
<body class="d-flex flex-column h-100">
<script th:href="#{/js/main.js}" type="text/javascript"></script>
</body>
</html>
There is no error message, the tag for the javascript is simply ignored.
Your script end tag is incomplete. It should be:
<script th:src="#{/js/main.js}" type="text/javascript"></script>
The tag should read
<script th:src[...]>
instead of
<script th:href[...]>
I'm not really sure why this is not working but I have an MVC View that I want to display the current date/time/seconds on the page. I've put the javascript in the "Scripts/script.js" file. I then added the following at the bottom of the MVC View.
#section scripts {
<script src="~/Scripts/script.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setDateTimer();
});
</script>
}
Thing is when I run it something is causing an error. Unfortunately at the moment I can't see the actual error message because of the way they have the site configured any error just takes you to a generic error page. I do know it has something to do with the code above because removing it cause the page to work.
For testing purposes I even removed all but simple javascript code in the file but that still doesn't work. Right now this is all that is in my script.js file.
function setDateTimer() {
var today = new Date();
}
I know the name of the of the .js file in the code is correct because I just dragged and dropped it to the page from the solution explorer.
Here is most of my _Layout page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</body>
</html>
Layout page doesn't have a place to render the section you can change it like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
#RenderSection("scripts",true)
</body>
</html>
I have used mobile.js. In my apps using phonegap for developing app
Please check my code
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="cordova.js"></script>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//some js code here
}
</script>
</head>
<body>
Login
</body>
</html>
login.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script>
alert("Hello");
</script>
</head>
<body>
Login form here..
</body>
</html>
My page fliping perfectly but When I will going index.html to login.html by clicking of Login link in index.html page my JavaScript alert not working.
use
$( function() {
alert('Hello');
});
I guess this type of js script injection into HTML is not supported by Cordova. You need to do the logic in the index.js script.
Also if you wish to perform a alert you can use the apache cordova plug-in for notifications (you can get it via project config --> plugins).