I have qrc file that looks like this:
<qresource prefix="/web">
<file alias="assets.js">../web/assets.js</file>
<file alias="index.html">../web/index.html</file>
</qresource>
Inside assets.js Just adding function for allert popup:
function myFunction()
{
window.alert("Hello from assets.js");
}
Inside index.html adding another javascript for alert popup, loading assets.js and adding 2 buttons. First one to call window popup from external javascript file (assets.js) and second to call the javascript that is embeded into index.html file:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function localFunction()
{
window.alert('HTML loaded');
}
</script>
<script src="assets.js"></script>
<button onclick="myFunction()">External JS</button>
<button onclick="localFunction()">Local JS</button>
</body>
</html>
Now when I'm trying to load index.html in qtwebkit:
webView->load(QUrl(QStringLiteral("qrc:/web/index.html")));
I can see that index.html has been loaded ok (I can see the 2 buttons )
When clicking on the button that should call the local (html embeded) javascript it works.
Clicking the second button does nothing.
It seems like the external assets.js is not loaded properly.
Any sugestions how I can get it working?
Thanks.
Javascript isn't evaluated from the html. Your JS file could not be found. The following has no effect:
<script src="assets.js"></script>
Try it explicitly:
const QString js = readFile("qrc:/web/assets.js"); // Load your javascript file
view->page()->mainFrame()->evaluateJavaScript(js);
Another solution, more efficient: Use the QRC System and set the baseUrl in setHtml to link all files correctly:
const QString html = readFile(":/index.html");
view->setHtml(html, QUrl("qrc:/"));
Related
I am trying to get cloudflare stream to work in angular. I have tried the solution given here: Angular attribute for HTML stream.
However, it is always a hit or a miss:
Out of 10 reloads, one loads the player.
But anytime I make a
change to the <stream> tag, and angular re-compiles, the player is
loaded. After this if I refresh the browser, it is a blank screen
again.
The component which shows the video is deep in the tree and the component belongs to a module that is lazy loaded:
In the index.html file:
<!doctype html>
<html lang="en">
<head>
...............
</head>
<body>
<app-root></app-root>
</body>
<script src="https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js" id="video_embed" defer="" async=""></script>
</html>
In the videoFile.component.ts:
<stream src="5d5bc37ffcf54c9b82e996823bffbb81" height="480px" width="240px" controls></stream>
Found a solution here: https://github.com/angular/angular/issues/13965
So everytime the component loads, the script is removed and reattached using ngOninit, like so:
document.getElementById("video_embed").remove();
let testScript = document.createElement("script");
testScript.setAttribute("id", "video_embed");
testScript.setAttribute("src", "https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js");
document.body.appendChild(testScript);
If anyone has any other solutions, please do let me know.
I am using R Shiny to develop a web page and also include my own R code.
I am using p5.js(https://p5js.org/) to display a game in the web page.
As in the official web page says I have an HTML and the p5 javascript code together with the javascript library. If I run the HTML, that is, clicking right and pressing chrome to display I get the started example (https://p5js.org/get-started/) with no incidence.
Here it is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<script language="javascript" type="text/javascript" src="libraries/p5.js"> </script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style> body {padding: 0; margin: 0;} </style>
</head>
<body>
</body>
</html>
When I do the same in Shiny, running the code from R-Studio I do not get anything from it. I have stored the javascript files in the www folder as it is supposed to be and I currently know that my HTML called the javascript since I set an alert in the p5 javascript file, but outside the setup and draw methods. The problem is that, even though the alert is loaded, seems like the setup and draw methods are not called and, obviously, as a consequence, they do not load the canvas. I know that they are not called because I have a called to an alert in the setup method that works running the HTML file directly but not if I run the same file from R-Studio.
Here it is the p5 javascript code:
alert("GOOD1");
function setup() {
alert("GOOD2");
createCanvas(640, 480);
}
function draw() {
if (mouseIsPressed) {fill(0);}
else {fill(255);}
ellipse(mouseX, mouseY, 80, 80);
}
I load the HTML page in Shiny using the next line of code
... ,tabItem(tabName = "tabProcessing", htmlOutput("processingMasterThesis") ...
Attach to the tag "processingMasterThesis" I have the corresponding URL to the HTML file in the server.R, as it is supposed to be so the problem is not here.
Why may be the cause of this? It works if I call the HTML file directly to be load in the browser but not if I do it from R-Studio, why?
I have solved the problem. The p5 java script code will be:
// =====================
// "app/sketch.js"
// =====================
var myCanvas;
function setup() {
var idCanvas = 'divCanvas';
myCanvas = createCanvas(300, 300);
myCanvas.parent(idCanvas);
}
function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
The library you need to run the example can be found at https://p5js.org/
In this javascript file I have created an id that reference a html div element so that is the place where I will set my canvas. Once this is done, the rest of the javascript code will code perfectly. The point is to reference that the parent of the canvas is that div as you can see in the code.
After this you just have to create either in shiny or pure html code something like this:
# THE UI (File ui.R)
library(shiny)
library(shinydashboard)
library(rmarkdown)
shinyUI(
fluidRow(
# THE UI
tags$html(
tags$body(
singleton(tags$head(tags$script(src = "master_thesis/app/libraries/p5.js")))
,singleton(tags$head(tags$script(src = "master_thesis/app/sketch.js")))
,singleton(tags$div(id = 'divCanvas', style = 'width:auto; height:auto'))
))
)
)
The code that I show below is in shiny. The first "head" line include the library p5.js and the second "head" line just say "hey this is my p5 script file" and "divCanvas will be the div that I will print on".
You may have issues with the references to the javascript file. I think is worthy to note that you must create a www folder in your root shiny application. In this folder, you must put your javascript files. For example, as you can see in my code the two javascript files that I am using follow the next path:
ShinyApplication/www/app/libraries/p5.js
ShinyApplication/www/app/sketch.js
Hope this can help!
gotemplates
Hello!
I'm learning Go language now and trying to port some simple WEB code (Laravel 4).
Everything was well, until I tried to reproduce Blade templates into text templates.
I found that Go can load my CSS and JavaScript files only from the catalog with a name "bootstrap" only.
Here is my catalog tree which I tried to use:
start-catalog
bootstrap (link to bootstrap-3.3.1)
bootstrap-3.3.1
css
bootstrap.min.css
js
bootstrap.min.js
jquery
jquery (link to jquery-2.1.1.min.js)
jsquery-2.1.1.min.js
go_prg.go
Here are my templates:
base_js.tmpl
{{define "base_js"}}
{{template "login_1"}}
<script src = "/bootstrap/js/jquery"></script>
<script src = "/bootstrap/js/bootstrap.min.js"></script>
{{end}}
base_header.tmpl
{{define "base_header"}}
<head>
<title>PAGE TITLE</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
</head>
{{end}}
If the catalog name differs from "bootstrap" Go language or Firefox can't load files from the templates above: bootstrap.min.css, bootstrap.min.js, jquery.
If I use not the link but the catalog name directly "bootstrap-3.3.1" than Go or Firefox can't load.
If all required files are moved under "bootstrap" I'm getting the results I expected (exactly the same as in Laravel 4).
To launch go language code the command go run go_prg.go was used.
Environment: Ubuntu 14.04, go-1.3.3, Firefox 31.
Who's wrong: Go language, Firefox or me?
Any help will be highly appreciated!
The problem described was caused by
http.Handle("/bootstrap/", http.StripPrefix("/bootstrap/", http.FileServer(http.Dir("bootstrap"))))
before any template was handled. It allowed access files under the directory 'bootstrap' only.
The problem was fixed by changing to
http.Handle( , http.StripPrefix(, http.FileServer(http.Dir("."))))
and adding to pathes for CSS and JavaScript files. Like so
/bootstrap/js/jquery">.
Web service, Accessing Service in html page i am getting error, this is my code.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type ="text/javascript" language="JavaScript">
function InitializeService()
{
service.useService(http://www.freewebservicesx.com/GetGoldPrice.asmx?WSDL,
"GetCurrentGoldPrice");
}
Function getgold()
{
var users="xxxxx";
var pawd="xxx";
service.GetCurrentGoldPrice.callService("GetCurrentGoldPrice",users,pawd);
}
function ShowResult()
{
alert(event.result.value);
}
</script>
</head>
<body onload="InitializeService()" id="service" onresult="ShowResult()">
<button onclick="getgold()">Get Age</button>
</body>
</html>
You need to enable the following property in your IE browser "Initialize and script ActiveX controls not marked as safe for scripting"
From Internet Explorer, go to Tools >> Internet Options>>Security tab, go to Custom level.
Enable "Initialize and script ActiveX controls not marked as safe for scripting" option and click OK.
I have tried it with jsfiddle... Here it is http://jsfiddle.net/XNEhp/
Try changing the Function getgold() to function getgold()
And do the following changes..
From
function InitializeService()
{
service.useService(http://www.freewebservicesx.com/GetGoldPrice.asmx?WSDL,
"GetCurrentGoldPrice");
}
To
function InitializeService()
{
service.useService('http://www.freewebservicesx.com/GetGoldPrice.asmx?WSDL',
'GetCurrentGoldPrice');
}
Let me know what happens now...
Hope it helps.
I have to make a Web Application for downloading files from a folder.I use Tomcat as a server.I wrote a JSP page for listing the content of my data folder,and I tried to make links for each file from this folder.
The JSP page is this:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" import="java.io.File,java.io.IOException,java.util.*,java.io.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
Contents <br>
<% File f = new File("C:\\Users\\name\\Desktop\\eclipse\\app\\PTW\\WebContent\\data\\"); // current directory
File[] files = f.listFiles();
for (File file : files) {
if (file.isDirectory()) {
//System.out.print("directory:");
} else {
%>
<a href="<%=file.getAbsolutePath()%>" target="_blank"><br> <%=file.getName() %>
</a>
<%
}
}
%>
</body>
</html>
The problem is that downloading these files is working only in I.E. and only if user selects Right CLick - Save target As.
So my way to do this is wrong!But I don't understand why?How to force downloading files from this JSP?
Thank You!
You must know that the path to the file on the file system is a different path than the URL. The file system is only known by your server, the URL is the path which is accessed by browsers.
Let's say your file is in /opt/tomcat/webapps/myApp/folder/file.jpg and you are running your Tomcat on www.example.com. If you generate (through JSP) a link like
Download File
Your browser will see this path as:
www.example.com/opt/tomcat/webapps/myApp/folder/file.jpg
Your browser will not find the file. The URL the browser would neet to find it is:
www.example.com/myApp/folder/file.jpg
Which consists of
the domain www.example.com
the servlet context myApp
the path inside the application to the file folder/file.jpg
So you need to build the path /myApp/folder/file.jpg in your JSP. You can do it this way:
Download
I use Expression Language here instead of scriptlets. This is considered better style as it improves maintaineance and readability.
Note: This will only work if your File is inside the webapplication directory (myApp). If it is outside, you will need a servlet to stream your files to the client, but that is an other story.