I am trying to load a javascript file stored on the device via html file which is loaded via a webview but never seems to load. I have tried using direct url's like you normally would in html and have also tried:
<script type="text/javascript" src="file:///android_asset/www/js/jsfile.js"/>
JavaScript is enabled on the webview settings too and works fine if I have it on a server.
Thanks if anyone can help.
Hi actually I thing you should call directly the js file because you are calling it from the browser which considers the asset folder being its root folder. You should use the "file:///" prefix when calling from java code. Try something like this:
<script type="text/javascript" src="www/js/jsfile.js"/>
You can use loadDataWithBaseURL.
Put all your javascript under an assets folder and give js file path relative to the assets directory in your script tag (in the html). Don't put a slash in the beginning of src.
Read the html into a string (htmlStr) and then load it in the webview as mentioned below.
webView.loadDataWithBaseURL("file:///android_asset/", htmlStr, "text/html", "UTF-8", null);
It has worked for me.
Related
I have a HTML file that I want to inject next to each result of a Google search result page from a Chrome extension.
I was wondering if I could use an iframe to load the HTML file?
This is instead of my current implementation that uses insertAdjacentHTML() in my Content Script and a horrible long string of HTML and inline CSS. Would much prefer to have a separate HTML file with its own CSS that I can just insert instead.
I tried:
chosenElements[i].insertAdjacentHTML('afterbegin', `<iframe src="/inject.html"></iframe>`);
but just get an iframe with a 404 page because it is looking in the 'https://www.google.com/index.html' directory rather than where the file sits.
The inject.html file is in the same place as the index.html file in my build folder for the extension. How do I access it? Can I access it?
Have you tried with
src="inject.html"
instead of
src="/inject.html"
I'm loading a html template into WKWebView. The HTML has a script tag which refers to a local JS file as mentioned below:
<script type="text/javascript" src="test.js"></script>
But, this js content is not getting loaded into web view at all.
So, i used WKUserScript to inject the content of this file into web view. This resolved my initial problem. But, i'm injecting some additional JS files in 'test.js' at run time. None of these files are getting loaded into web view.
When debugged, i get following error for all these files: 'Failed to load resource: The requested URL was not found on this server.'.
Interestingly, same code works fine when UIWebView is used.
Any input/feedback is appreciated. Thanks.
Yes it can.
load your test.js from Resources bundle
var path = NSBundle.mainBundle().pathForResource("test", ofType: "js")
Convert the file contents to a string, then use the built-in evaluateJavaScript() to load javascript code...
webView.evaluateJavaScript(String.stringWithContentsOfFile(path), completionHandler: nil)
I'm trying to use JavaScript functions from the a JavaScript library in my JSP file to display the result on a web-browser page, but it seems like the inclusion didn't work.
I actually put the .js file corresponding to the library in the WEB-INF folder and added the following line in the JSP file to include it in it :
<script type="text/javascript" src="./jsgl.min.js"></script>
I successfully managed to use the library in a simple HTML file, that's why I don't understand why this doesn't work.
EDIT :
TLDR
Put the JS file in a folder under web content (but not WEB-INF) like [WebContent]/js/jsgl.min.js, and use the following in the JSP:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsgl.min.js"></script>
Explanation
JSP files are compiled by the server, then processed to send data (typically HTML) back to the web browser. A <script> tag is a HTML tag that gets interpreted by the browser, not by the servlet container. So the browser sees that in the HTML then makes a new request to the server for the JavaScript file in the src attribute.
The src attribute is relative to the URL that the browser asked for, not to the path of the JSP on the server.
So as an example, let's say:
The browser asks for a page at http://example.com/SomeWebApp/some-resource
The servlet container internally forwards the request to a JSP at /WEB-INF/jsp/somepage.jsp
The response sent to the browser contains the script tag <script type="text/javascript" src="./jsgl.min.js"></script> (as in your question)
The browser sees the URL ./jsgl.min.js and resolves it relative to the URL it has asked the server for (which in this case was http://example.com/SomeWebApp/some-resource - note there is no trailing '/') so the browser will request the JS file from http://example.com/SomeWebApp/jsgl.min.js*. This is because the relative URL in the script tag's src attribute starts with a '.'.
Another answer suggested putting the JS file in a 'js' folder and changing the script tag to <script type="text/javascript" src="/js/jsgl.min.js"></script>. Using the same original page URL as in the example above, the browser would translate this src URL to http://example.com/js/jsgl.min.js. Note that this is missing the "/SomeWebApp" context path.
The best solution therefore is indeed to put the JS file in a static folder like /js/jsgl.min.js, but to use the following in the JSP script tag:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsgl.min.js"></script>
The JSP will translate the ${pageContext.request.contextPath} bit into the current context path, making the code portable (if you redeploy the webapp with a different context path, it will still work). So the HTML response received by the browser will be (again, sticking with our example above):
<script type="text/javascript" src="/SomeWebApp/js/jsgl.min.js"></script>
The browser will now resolve that relative URL to the correct target.
__
*If the original URL had a trailing slash = i.e., was http://example.com/SomeWebApp/some-resource/, the JS URL would be http://example.com/SomeWebApp/some-resource/jsgl.min.js
Static resources should be put outside the WEB-INF folder (as you would typically not allow web access to its content).
You could put the file under webapp/js/, then change your script import to:
<script type="text/javascript" src="/js/jsgl.min.js"></script>
In addition to being good practice, this is good as it is not relative to the location of the JSP file.
Files in WEB-INF are inaccessible.
You may put them under webapp and try accessing as mentioned above.
I have just wrote a javascript file which I ran the via intelliJ using a few different browsers e.g. Google Chrome. This works fine as it runs locally e.g. http://localhost://.
However I want to be able to send it to someone so they just click on the .html file (packaged in correct folder) and it appears on their browser. Is there anyway I can do this? Right now the url points locally e.g. file:///Users/**/project/file.html.
Use a relative path. If your HTML file is in the same folder as the JS file, this means simply including it like so:
<script src="jsfile.js"></script>
If it's in a subdirectory, include all the folders necessary to get there:
<script src="subdirectory1/subdirectory2/jsfile.js"></script>
If it's up a directory, use the .. path:
<script src="../anotherfolder/jsfile.js"></script>
Or just include it in the HTML page itself:
<script>
// your code here
</script>
Trying to import my js file from my page.
My page is in webcontent/mydomain/templates/page.xhtml
My js is in webcontent/mydomain/test/scripts
In page.xhtml
<script type="text/javascript" src="../test/scripts/test.js"></script>
But still the script is not getting picked.
Can anyone tell how I need to give the path in src.
Try this:
<script src="/test/scripts/test.js"></script>
Provided that webcontent is the root of public web content and thus /mydomain is also a public folder and thus your JavaScript is standalone available by http://localhost:8080/context/mydomain/test/scripts/test.js, assuming a domain of http://localhost:8080 and a context path of /context, then the following should do:
<script src="#{request.contextPath}/mydomain/test/scripts/test.js"></script>
This will generate a domain-relative URL with a dynamically inlined context path, which is much more robust than fiddling with ../ which would make the URI relative to the current request URI (as you see in browser's address bar) and not to the physical location of the template file as many starters incorrectly assume.