I have implemented a function in webview. I put the javascript function in the html head then load it through web.loadUrl but the webview does not take the function into consideration. Is it possible to load it this way ? or am I on the wrong track ?
"<td><a href='' onclick=\"displaying('image url')\" id=/image"+my_image[i] +"/"+"
class='popup-open'><img
src='"+my_image[i]+"'"+
"width='80' height='65'></a></td></tr><tr>";
the hmtl content
String webData = "<!DOCTYPE html>" +
"<head> "+
"<script>"+"function displaying(url)
{document.getElementById('image').innerHTML =\"<img src=\"url\" width=\"100\" height=\"105\">\";}"+"</script>"
+
" </head><body>"+ html_content +"</tr></table></body></html>";
Maybe is your JavaScript or some syntax shit. First of all, try to figure out what's the error message from WebKit engine.
To display webview's javascript messages, put onConsoleMessage in implementation.
myWebView.setWebChromeClient(new WebChromeClient() {
public boolean onConsoleMessage(ConsoleMessage cm) {
Log.d(cm.message() + " -- From line "
+ cm.lineNumber() + " of "
+ cm.sourceId());
return true;
}
});
Make sure you have following enabled
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
Related
I'm trying to create a customized button to appear on a pop up which generates a dynamic link (a URL). I don't seem to be able to do this via the .setHTML because of the timing, can't bind a button to a function at runtime. So I thought I'd try the newish .setDOMContent
There's zero information online as to how this feature works. I'm wondering if anyone has an example of this where a button is added to the popup that can run a function and send data.
Here's my very poor attempt at setting this up.
This function creates the popup
function GameObjectPopup(myObject) {
var features = map.queryRenderedFeatures(myObject.point, {
layers: ['seed']
});
if (!features.length) {
return;
}
var feature = features[0];
// Populate the popup and set its coordinates
// based on the feature found.
var popup = new mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML(ClickedGameObject(feature))
.setDOMContent(ClickedGameObject2(feature))
.addTo(map);
};
This function adds the html via the .setHTML
function ClickedGameObject(feature){
console.log("clicked on button");
var html = '';
html += "<div id='mapboxgl-popup'>";
html += "<h2>" + feature.properties.title + "</h2>";
html += "<p>" + feature.properties.description + "</p>";
html += "<button class='content' id='btn-collectobj' value='Collect'>";
html += "</div>";
return html;
}
This function wants to add the DOM content via the .setDOMContent
function ClickedGameObject2(feature){
document.getElementById('btn-collectobj').addEventListener('click', function()
{
console.log("clicked a button");
AddGameObjectToInventory(feature.geometry.coordinates);
});
}
I'm trying to pipe the variable from features.geometry.coordinates into the function AddGameObjectToInventory()
the error I'm getting when clicking on an object (so as popup is being generated)
Uncaught TypeError: Cannot read property 'addEventListener' of null
Popup#setHTML takes a string that represents some HTML content:
var str = "<h1>Hello, World!</h1>"
popup.setHTML(str);
while Popup#setDOMContent takes actual HTML nodes. i.e:
var h1 = document.createElement('h1');
h1.innerHTML="Hello, World";
popup.setDOMContent(h1);
both of those code snippets would result in identical Popup HTML contents. You wouldn't want to use both methods on a single popup because they are two different ways to do the same thing.
The problem in the code you shared is that you're trying to use the setDOMContent to add an event listener to your button, but you don't need to access the Popup object to add the event listener once the popup DOM content has been added to the map. Here is a working version of what I think you're trying to do: https://jsfiddle.net/h4j554sk/
I am trying to build a unity project, in my project i have to show the web page in app using unity webview either by loading locally or by once storing cache of that web page. i have tried loading locally by downloading a web page but without internet the content of the html files loaded but CSS, JS and Images are not. for loading locally i have pasted the folders and HTML file to a folder in project-> Assests-> Streaming Assets. Image for folders and HTML file is Streaming Assets directory Image the underlined folders and file is used. And in unity editor link for the file is provided like this:- Unity Editor Image and script used to load the file is below
case RuntimePlatform.OSXEditor:
case RuntimePlatform.OSXPlayer:
case RuntimePlatform.IPhonePlayer:
case RuntimePlatform.Android:
if (Url.StartsWith("http")) {
webViewObject.LoadURL(Url.Replace(" ", "%20"));
} else {
webViewObject.LoadURL("StreamingAssets/" + Url.Replace(" ", "%20"));
var src = System.IO.Path.Combine(Application.streamingAssetsPath, Url);
var dst = System.IO.Path.Combine(Application.persistentDataPath, Url);
var result = "";
if (src.Contains("://")) {
var www = new WWW(src);
yield return www;
result = www.text;
} else {
result = System.IO.File.ReadAllText(src);
}
System.IO.File.WriteAllText(dst, result);
webViewObject.LoadURL("file://" + dst.Replace(" ", "%20"));
}
if (Application.platform != RuntimePlatform.Android) {
webViewObject.EvaluateJS(
"window.addEventListener('load', function() {" +
" window.Unity = {" +
" call:function(msg) {" +
" var iframe = document.createElement('IFRAME');" +
" iframe.setAttribute('src', 'unity:' + msg);" +
" document.documentElement.appendChild(iframe);" +
" iframe.parentNode.removeChild(iframe);" +
" iframe = null;" +
" }" +
" }" +
"}, false);");
}
break;
#else
If anyone Knows Please help.
GWT's RichTextArea doesn't have a method to make it "ReadOnly".
There's a setEnabled() method, but if you call setEnabled(false), it doesn't work.
I'm trying a workaround for this that should work. My idea is to replace the RichTextArea for this behavior with a HTML widget.
The problem is, if I use an HTML widget to set the original RichTextArea's content, it will be affected by all the styling of my web application.
The RichTextArea achieves this wrapping the content inside an IFrame.
So i'm trying to mimick that, doing something like this:
public class RichTextAreaReadOnly extends Composite
{
protected HTML instance;
public RichTextAreaReadOnly()
{
this.instance = new HTML();
this.initWidget(this.instance);
}
public void setHTML(String html)
{
this.instance.setHTML("<iframe class=\"gwt-RichTextAreaReadOnly\">"
+ "<html>"
+ "<head></head>"
+ "<body>"
+ html
+ "</body>"
+ "</html>"
+ "</iframe>");
}
}
The problem is, for some strange reason the body appears empty.
If I try this:
public void setHTML(String html)
{
this.instance.setHTML("<html>"
+ "<head></head>"
+ "<body>"
+ html
+ "</body>"
+ "</html>");
}
(note: without the iframe tag)
It works but the styling is incorrect because it is being affected by styles it shouldn't be.
Any idea of why when I use HTML.setHTML() to create an IFrame, the body tag appears empty???
I would like to show an image and its dimensions on the client before uploading it to the server. Whenever I try to create an Image widget of gwt ext, it doesn't accept a local file (on the file system). It only accepts http requests. I also tried String img = GWT.getHostPageBaseURL() + "image_name" and the replace function but with same result. Finally I moved to ImagePreloader but its also needs a URL.
ImagePreloader.load("URL of image", new ImageLoadHandler()
{
public void imageLoaded(ImageLoadEvent event)
{
if (event.isLoadFailed())
Window.alert("Image " + event.getImageUrl() + "failed to load.");
else
Window.alert("Image dimensions: " + event.getDimensions().getWidth() + " x " + event.getDimensions().getHeight());
}
});
Can someone suggest a solution that doesn't include uploading the image first?
Have a look at this related question and answer:
Preview an image before it is uploaded
You can include it using JSNI. I'm now aware of a solution within GWT.
Just found gwtupload which claims to be able to preview images before uploading them.
Please take a look at the sample JS code below:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
and the associated HTML:
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
I'm trying to call a JS function from an SWF which is loaded inside an application tab. As a canvas FBML, the code is working correctly but in case of application tab it's not working.
AS3 Code:
protected function button1_clickHandler(event:MouseEvent):void
{
callFBJS(["insideFlex"])
}
protected function callFBJS(text:Array):void
{
var connection:LocalConnection = new LocalConnection();
var connectionName:String = loaderInfo.parameters.fb_local_connection;
if (connectionName)
{
logLbl.text = "Connection Name: " + connectionName;
connection.send(connectionName,"callFBJS","doSomething",text);
logLbl.text = logLbl.text + "\n" + "Method invoked";
}
}
JS Code:
<fb:fbjs-bridge/>
<fb:swf swfsrc="<SWF File>" imgsrc="http://www.easyhealth.org.uk/cmsimages/adobe_flash_1470_1470.jpg" height="655" width="760"/>
<script>
function doSomething(a)
{
console.log(a);
}
</script>
I spent a day solving this issue. You have to declare any FBJS function and call it by clicking on an HTML link. After you click, the FBJS-bridge-based calls will work. I don't understand how or why, but this solved the problem for me.