I want to get the generated html output from a javascript within a given html string in java.
First, i just don't know, how to set the full html and javascript in code. all i've seen is, that i can give some small javascript to java, invoke some parameters and get some output.
Is there a way to set a html-string as context??
The example (taken from another thread):
<html>
<head><title> test </title>
<body></body>
<div>Welcome</div>
<style type="text/css">
.title{
color:red
}
</style>
<script type="text/javascript">
var i=0;
for (i=0;i < 5;i++){
document.writeln("<div class='title'>" + i + "</div>");
}
</script>
</html>
What i want to do is, to pass this html code into javascript context and call the function (actually there is no function, but i know how to call javascripts functions)
then, Rendering in a browser will give you this html back:
<html>
<head><title> test </title>
<body></body>
<div>Welcome</div>
<style type="text/css">
.title{
color:red
}
</style>
<script type="text/javascript">
var i=0;
for (i=0;i < 5;i++){
document.writeln("<div class='title'>" + i + "</div>");
}
</script>
<div class="title">0</div>
<div class="title">1</div>
<div class="title">2</div>
<div class="title">3</div>
<div class="title">4</div>
</html>
So, the basic output on the javascripting mangere is simple:
Welcome
0
1
2
3
4
I don't want to render any of these elements, i am simply interested in getting the html output.
I'm not sure how to perform this task.
I want to keep it simple, no frameworks at all, just a simple mechanic to pass html-code and javafunctions into the javascriptengine, evaluate it and get the html back, just like the browsers getting more html-code back (usually).
there's no rendering intended.
Have you checked out the new Nashorn javascript engine in Java 8?
I havent actually used it yet, so I am not sure if you can just pass it an html string or if you will need to separate the JS and HTML, but worth taking a look.
Theres a basic tutorial here:
http://winterbe.com/posts/2014/04/05/java8-nashorn-tutorial/
If not, there is always PhantomJS that you can use to execute Javascript. There are some examples here:
http://phantomjs.org/quick-start.html
Looks like there are some useful functions like page loading and code evaluating that you may be able to use.
Related
I am using jquery load function in my application's masterpage.html and it is working fine. But the problem is i need to put Jquery.min.js in all my content pages in order to use jquery functionality in my content page. I don't want to include it in all pages. It should refer from my master page.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
<script type="text/javascript">
function loadContent(pagename)
{
$("#output").load(pagename);
}
</script>
</head>
<body>
About
<div id="output"></div>
</body>
</html>
about.html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
<div id="content">
This is about page !!
</div>
As you see my about.html again am including jquery in order to use it in my about.html page. How to avoid this in all pages ? Please help
No, it is not possible . You have to include it in all pages where you are using jquery
Instead of referring to the url like below ,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
You can download the jquery library to your project path and use it like
<script src="project_name/folder_name/jquery.min.js">
But it is compulsory to include jquery in all pages
Hope this helps !!
I can't give you a best answer, these is my advice
the jQuery file had better include at the bottom in body tag.
If you use the jQuery,you must include it.
This question already has answers here:
Parse JavaScript with jsoup
(2 answers)
Closed 9 years ago.
I've got a webpage that creates a table using Javascript. Right now I'm using JSoup in my Java project to parse the webpage. By the way JSoup isn't able to run Javascript so the table isn't generated and the source of the webpage is incomplete.
How can I include the HTML code created by that script in order to parse its content using JSoup? Can you provide a simple example? Thank you!
Webpage example:
<!doctype html>
<html>
<head>
<title>A blank HTML5 page</title>
<meta charset="utf-8" />
</head>
<body>
<script>
var table = document.createElement("table");
var tr = document.createElement("tr");
table.appendChild(tr);
document.body.appendChild(table);
</script>
<p>First paragraph</p>
</body>
</html>
The output should be:
<!DOCTYPE html>
<html>
<head>
<title>
A blank HTML5 page
</title>
<meta charset="utf-8"></meta>
</head>
<body>
<script>
var table = document.createElement("table");
var tr = document.createElement("tr");
table.appendChild(tr);
document.body.appendChild(table);
</script>
<table>
<tr></tr>
</table>
<p>
First paragraph
</p>
</body>
</html>
By the way, JSoup doesn't include the table tag as it isn't able to execute Javascript. How can I achieve this?
First possibility
You have some options outside Jsoup, i.e. employing a "real" browser and interact with it. An excellent choice for this would be selenium webdriver. With selenium you can use different browsers as back end, and maybe in your case the very lightweight htmlUnit would do already. If more complicated JavaScript is called there is often no other choice then running a full browser. Luckily, phantomjs is out there and its footprint is not too bad (headless and all).
Second possibility
Another approach could be that you grab the javascript source with JSoup and start a JavaScript interpreter within Java. For that you could use Rhino. However, if you go that path you might as well use HtmlUnit directly, which is probably a bit less bulky.
I want to programmatically show a div tag after some processing has completed while rendering a JSP. What's the best way to do this using Java? Using jQuery I would do this:
$('#mydiv').removeClass("hide_me");
...or...
$('#mydiv').show();
How can I do this programmatically in Java while rendering the page?
Assuming you have the standard JSP setup including JSTL and have mapped it to 'c' you could just do:
<c:if test="${myCondition}">
<div id="mDiv">
content
</div>
</c:if>
It does seem from the comments like there is some confusion about rendering JSP on the server vs rendering content in the browser. Everything that happens in the JSP is server side work that has to completely finish before the browser receives the generated document and starts drawing it. You can't use JSP to change content that is already on the user's screen. You need javascript, html5, etc, for that.
With JSP Java runs on the server (unlike JavaScript that runs within browser) so conditionally render your <DIV> using Java if statement within JSP:
<% if( test="true" ) { %>
<DIV>....</DIV>
<% } %>
I think you are looking for something like this:
<div id="loader">Loading / GIF animation</div>
<div id="result" style="display:none;">
Lots of data.
Should be flushed to the browser every now and then.
This will take seconds...
</div>
<script type="text/javascript">
$("#loader").hide();
$("#result").show();
</script>
I'm planning my website structure as following:
header.scala.html
XXX
footer.scala.html
now, instead of "xxx" there should be a specific page (i.e. "UsersView.scala.html").
what I need is to include (like with well-known languages) the source of the footer and the
header into the the middle page's code.
so my questions are:
How do you include a page in another with scala templating?
Do you think it's a good paradigm for Play! framework based website?
Just call another template like a method. If you want to include footer.scala.html:
#footer()
A common pattern is to create a template that contains the boilerplate, and takes a parameter of type HTML. Let's say:
main.scala.html
#(content: HTML)
#header
// boilerplate
#content
// more boilerplate
#footer
In fact, you don't really need to separate out header and footer with this approach.
Your UsersView.scala.html then looks like this:
#main {
// all your users page html here.
}
You're wrapping the UsersView with main by passing it in as a parameter.
You can see examples of this in the samples
My usual main template is a little more involved and looks roughly like this:
#(title: String)(headInsert: Html = Html.empty)(content: Html)(implicit user: Option[User] = None)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#title</title>
// bootstrap stuff here
#headInsert
</head>
<body>
#menu(user)
<div id="mainContainer" class="container">
#content
</div>
</body>
</html>
This way a template can pass in a head insert and title, and make a user available, as well as content of course.
Play provide a very convenient way to help implement that!
Layout part from official docs:
First we have a base.html (that's we call in django -_-)
// views/main.scala.html
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
</head>
<body>
<section class="content">#content</section>
</body>
</html>
How to use the base.html?
#main(title = "Home") {
<h1>Home page</h1>
}
More information here
How can I read/access a JSP variable from JavaScript?
alert("${variable}");
or
alert("<%=var%>");
or full example
<html>
<head>
<script language="javascript">
function access(){
<% String str="Hello World"; %>
var s="<%=str%>";
alert(s);
}
</script>
</head>
<body onload="access()">
</body>
</html>
Note: sanitize the input before rendering it, it may open whole lot of XSS possibilities
The cleanest way, as far as I know:
add your JSP variable to an HTML element's data-* attribute
then read this value via Javascript when required
My opinion regarding the current solutions on this SO page: reading "directly" JSP values using java scriplet inside actual javascript code is probably the most disgusting thing you could do. Makes me wanna puke. haha. Seriously, try to not do it.
The HTML part without JSP:
<body data-customvalueone="1st Interpreted Jsp Value" data-customvaluetwo="another Interpreted Jsp Value">
Here is your regular page main content
</body>
The HTML part when using JSP:
<body data-customvalueone="${beanName.attrName}" data-customvaluetwo="${beanName.scndAttrName}">
Here is your regular page main content
</body>
The javascript part (using jQuery for simplicity):
<script type="text/JavaScript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
jQuery(function(){
var valuePassedFromJSP = $("body").attr("data-customvalueone");
var anotherValuePassedFromJSP = $("body").attr("data-customvaluetwo");
alert(valuePassedFromJSP + " and " + anotherValuePassedFromJSP + " are the values passed from your JSP page");
});
</script>
And here is the jsFiddle to see this in action http://jsfiddle.net/6wEYw/2/
Resources:
HTML 5 data-* attribute: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
Include javascript into html file Include JavaScript file in HTML won't work as <script .... />
CSS selectors (also usable when selecting via jQuery) https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
Get an HTML element attribute via jQuery http://api.jquery.com/attr/
Assuming you are talking about JavaScript in an HTML document.
You can't do this directly since, as far as the JSP is concerned, it is outputting text, and as far as the page is concerned, it is just getting an HTML document.
You have to generate JavaScript code to instantiate the variable, taking care to escape any characters with special meaning in JS. If you just dump the data (as proposed by some other answers) you will find it falling over when the data contains new lines, quote characters and so on.
The simplest way to do this is to use a JSON library (there are a bunch listed at the bottom of http://json.org/ ) and then have the JSP output:
<script type="text/javascript">
var myObject = <%= the string output by the JSON library %>;
</script>
This will give you an object that you can access like:
myObject.someProperty
in the JS.
<% String s="Hi"; %>
var v ="<%=s%>";
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<title>JSP Page</title>
<script>
$(document).ready(function(){
<% String name = "phuongmychi.github.io" ;%> // jsp vari
var name = "<%=name %>" // call var to js
$("#id").html(name); //output to html
});
</script>
</head>
<body>
<h1 id='id'>!</h1>
</body>
I know this is an older post, but I have a cleaner solution that I think will solve the XSS issues and keep it simple:
<script>
let myJSVariable = <%= "`" + myJavaVariable.replace("`", "\\`") + "`" %>;
</script>
This makes use of the JS template string's escape functionality and prevents the string from being executed by escaping any backticks contained within the value in Java.
You could easily abstract this out to a utility method for re-use:
public static String escapeStringToJS(String value) {
if (value == null) return "``";
return "`" + value.replace("`", "\\`") + "`";
}
and then in the JSP JS block:
<script>
let myJSVariable = <%= Util.escapeStringToJS(myJavaVariable) %>;
</script>
The result:
<script>
let myJSVariable = `~\`!##$%^&*()-_=+'"|]{[?/>.,<:;`;
</script>
Note: This doesn't take separation of concerns into consideration, but if you're just looking for a simple and quick solution, this may work.
Also, if you can think of any risks to this approach, please let me know.