I've been trying to figure out how to toggle a Div in Android Webview, like this http://jsfiddle.net/Z9f2b/
this is my Android code but doesn't toggle at all, can someone explain what I'm doing wrong? thanks:
wv = (WebView) findViewById(R.id.webView1);
WebSettings webSettings = wv.getSettings();
wv.setWebViewClient(new WebViewClient());
wv.getSettings().setLoadWithOverviewMode(true);
wv.getSettings().setUseWideViewPort(true);
wv.getSettings().setDisplayZoomControls(false);
wv.getSettings().setBuiltInZoomControls(false);
wv.getSettings().setSupportZoom (false);
wv.getSettings().setJavaScriptEnabled(true);
webSettings.setBuiltInZoomControls(true);
String script = "$('#liked').on('click', function() {$('#liked').hide();$('#notliked').show();});$('#notliked').on('click', function() {$('#liked').show();$('#notliked').hide();});";
html = "<div id='liked' style='float:left;display:none; height:100px; width:100px; background-color:blue'>1</div><div id='notliked' style="float:left;height:100px; width:100px; background-color:red">2</div>";
String summary = "<html>"+script+"<body>"+html+"</body></html>";
wv.loadUrl("about:blank");
wv.loadData(summary, "text/html", null);
Try wrapping your javascript in <script> tags.
Also, you need to wrap the javascript that you have in a call to $(window).load so the handlers get registered when the DOM is ready.
Additionally, you need to link to a version of the JQuery library.
Are you sure you need JQuery for this? You could write it in standard javascript very simply with an onclick handler on the div... something like:
<div id='liked' style='float:left;display:none; height:100px; width:100px; background-color:blue' onclick="document.getElementById('notliked').style.display='block'; document.getElementById('liked').style.display='none';">1</div>
<div id='notliked' style="float:left;height:100px; width:100px; background-color:red; disply:block" onclick=" document.getElementById('liked').style.display='block'; document.getElementById('notliked').style.display='none';">2</div>
Try loading HTML data before insertion of script. Javascript can be inserted after HTML is loaded into web view. This is the better idea. So your code should probably go like this:
String summary = "<html><body>"+html+"</body></html>";
wv.loadUrl("about:blank");
wv.loadData(summary, "text/html", null);
and followed by:
wv.loadUrl("javascript:"+script);
This will insert javascript onto current web page and you dont even need to take care that where it has to be inserted and how. Webview will take care of it.
Related
Hej sry when I ask but is there a way to use the webview tag in an nw.js application without that everything under the webview is covered in an shadow-root?
<webview id="foo" src="file:///C:/Users/midjo/Desktop/TEST.html" style="display:flex; height:100%; width:100%;" partition="trusted" tabindex="-1">
shadow-root(open)
No, but shadow-root is Ok, it's easy to do whatever you want with DOM inside.
For example:
<webview id="foo" src="test.html" partition="trusted" style="display: flex;"></webview>
<script>
foo.addEventListener('loadstop', e => {
foo.executeScript({
code: `document.querySelector('body').innerText;`
}, result => {
console.log(result);
});
});
</script>
You can get any content, click things and even inject any js-file.
I have a home page with multiple <div> tags. One of the <div id="top_bar"> contains a link. If I click on the link, a new web page should load on one of the other <div id="content"> in home page. How do I do that?
More over, if the newly loaded page on one of the other <div id="content"> contains a link, and clicking on the link helps the 2nd new web page load in the <div id ="content"> tag replacing the first content of the div , the question is how do I do that?
This is an assignment given to me and the rules are:
I have to use Javascript, CSS and HTML only.
I can't use <iframe> tag.
I can't use <table> tag either to load page in a row/column.
I need help and advice about how to do it.
home.html
<body>
<div id="topBar">
HOME
<a href="#" onclick="load_about()" > ABOUT </a>
SONG LIST
</div>
<div id ="content"> </div>
</body>
I want the music.html to open in side the < div id="content" > which all ready does. but in music.html there is a button. I want to open Songlist.html in < div id="content" > by clicking on that button. code for
music.html :
<body >
<form name="flyrics" method="get" >
Lyrics: <input type ="text" name ="lyrics"/>
Artist Name:<input type ="text" name ="artist" />
<input type="submit" id="x" value="Search" />
</form>
</body>
javascript:
function load_home(){ document.getElementById("content").innerHTML='<object type="type/html" data="home.html" id="link_pages" ></object>'; }
function load_about(){ document.getElementById("content").innerHTML='<object type="type/html" data="about.html" id="link_pages" ></object>'; }
function load_search(){ document.getElementById("content").innerHTML='<object type="type/html" data="music.html" id="link_pages" ></object>'; }
function validation(){
var x=document.forms["flyrics"]["lyrics"].value;
if (x==null || x=="")
{
alert("Search without Lyrics?");
return false;
}
var y=document.forms["flyrics"]["artist"] value;
if (y==null || y=="")
{
alert("Search without Artist Name?");
return false;
}
window.open("songList.html", "currentWindow");
}
AJAX is what your assignment is looking for.
Simple Example
HTML:
<button id="nav">load</button>
<div id="page"></div>
JS:
document.getElementById('nav').onclick = function(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if (xhr.readyState==4)
{
document.getElementById("page").innerHTML = xhr.response;
}
}
xhr.open("GET", "http://www.codecademy.com/", false);
xhr.send();
}
fiddle: http://jsfiddle.net/DZmBG/3/
In one of your comments, you mentioned using <object> tags to embed external HTML files.
Here is an example using that method:
HTML:
<div id="links">
stuff
fun
bing
</div>
<div id="container"></div>
CSS:
div#container {
width:500px;
height:500px;
overflow:hidden;
}
JS:
function go(obj) {
var page=obj.href;
document.getElementById('container').innerHTML='<object data="'+page+
'" type="text/html"><embed src="'+page+'" type="text/html" /></object>';
return false;
}
http://jsfiddle.net/sAcCV/
EDIT:
This being said, I recommend using AJAX to load external content, instead:
http://www.javascriptkit.com/dhtmltutors/ajaxincludes.shtml
See Relfor's answer.
Iframe is the obvious answer. That's what it was made for. But since your requirements state you can't use it....
Any site that's not within your domain is going to violate the same origin policy, and Javascript in the remote page is not going to run as you probably would think it would inside a div on your site. You'd probably have to examine a CURL get approach or something similar to do it with a straight div and javascript.
AJAX is definitely the way to go if you are not able to use iframes. I would suggest using jQuery for this example to save some time. Their AJAX handling is pretty straightforward and you are gonna want to use their .live() or .on() event handlers to track the click events inside the containers.
Additionally, you may run into issues if you are loading sites on different domains. AJAX calls are typically meant for same-domain responses. You can get around this using JSONP. However, your web service must support method injection for this to work. In not, you may want to see if you can work around the iframe barrier with your host/webmaster.
You can not. You are asking for something that can not be done. For such situation you must use iframe.
this is a duplicate of Executing groovy statements in JavaScript sources in Grails
with one difference, i just want to render the js-code, no script tags around it
imagine someone loads a script from my server inside his html like
<script type="text/javascript" src="mywebsite.com/xyJs/xyz"></script>
and i want to render the "content" of the request
inside the controller i parse the /xyz and find out what must be inside the script and an absolute link for the src of iframe
i need to run this groovy script too
i´m trying to do this like
render "document.writeln('<iframe src=\"${grailsApplication.config.grails.serverURL}/superStuff/stuff23/${profil.slugs}\" name=\"SuperStuff\" width=\"300\" height=\"600\" align=\"left\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" frameborder=\"0\" ></iframe>');"
but the browser just ignores the document.writeln('
and treat the iframe like an html element and renders its content
how can i deklare that its just a tiny bit of js-code without setting script tags?
i also tried to render a view like
render(view:'SuperStuff',model:[profil:profil])
and inside the view SuperStuff is
<%# page contentType="text/javascript; UTF-8" %>
document.writeln("<iframe src='${grailsApplication.config.grails.serverURL}/superStuff/stuff23/${profil.slugs}' name='SuperStuff' width='300' height='600' align='left' scrolling='no' marginheight='0' marginwidth='0' frameborder='0' ></iframe>");
but this also doesnt work and renders the content of the iframes´s src
what i doing wrong ?
for any hint, this makes me fuzzy, thanks in advance
yeaaaah got that one fixed
render contentType: 'text/javascript', text: "document.writeln('<iframe src=\"${grailsApp......."
I believe, your controller works just as expected: it returns the javascript-code exactly as you want: your call to document.writeln(). Please use the Network-Panel of Firebug, Chrome DevTools or similar to verify this.
However, the js-code will immediately be executed which results in the inclusion of the specified iframe-element on the current position, as explained for example here.
I want to dynamically change the data-href for the fb comments plugin below based on a javascript variable. I'm running a flash swf file and am passing the new link for data-href into the html wrapper via a javascript function. When I do that, I want the fb comments plugin to refresh to the new data-href link.
<div style="float: left; padding-left:5px; min-height:500px" class="fb-comments" data-href="www.example.com" data-num-posts="20" data-width="380"></div>
Called javascript function passing in the new link for the comments plugin:
function changeCommentsUrl(newUrl){
// should refresh fb comments plugin for the "newUrl" variable
}
This will load the initial comments box, the script will when executed will clear the comments div wrapper and replace html5 comments box with new url. JS SDK will then parse the new box.
JS SDK is required for this work. refer to https://developers.facebook.com/docs/reference/javascript/
fix for xfbml render from dom manipulation
<div id="comments">
<div style="float: left; padding-left:5px; min-height:500px" class="fb-comments" data-href="www.example.com" data-num-posts="20" data-width="380"></div>
</div>
<script>
function changeCommentsUrl(newUrl){
// should refresh fb comments plugin for the "newUrl" variable
document.getElementById('comments').innerHTML='';
parser=document.getElementById('comments');
parser.innerHTML='<div style="float: left; padding-left:5px; min-height:500px" class="fb-comments" data-href="'+newUrl+'" data-num-posts="20" data-width="380"></div>';
FB.XFBML.parse(parser);
}
</script>
user solved:
document.getElementById('comments').innerHTML='<div style="float: left; padding-left:5px; min-height:500px" class="fb-comments" data-href="'+link+'" data-num-posts="20" data-width="380"></div>';
FB.XFBML.parse(document.getElementById('comments'));
I found the simplest and effective way to make your Facebook Comment box to recognize the individual URL of each page (particularly good for e-commerce sites).
Add this script to your top header portion of your website template (it generates de data-href value for your Comment Box div:
<script type="text/javascript" language="javascript">
jQuery("#FC").attr("data-href", window.location.href.split("?")[0]);
</script>
And then on your Comment Box div, add the id for the value generated on the javascript:
<div id="FC" class="fb-comments" data-href="" data-width="700" data-numposts="5" data-colorscheme="light">
Voilá. I dedicated so much time to crack this nut, I just had to share it for you to save some time for break!
Cheers!
I have a div with contenteditable="true". How can I set focus on this div via javascript(if it possible on pure js, without jquery)?
Prior to iOS 6 this wasn't possible, but thankfully they've changed that. You can't do it in general for a website, but if you are embedding a UIWebView in your application you can do it now:
UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
webView.keyboardDisplayRequiresUserAction = NO;
Then your element.focus() will work and bring up the keyboard as desired.
http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIWebView_Class/Reference/Reference.html#//apple_ref/occ/instp/UIWebView/keyboardDisplayRequiresUserAction
More info on what changed with iOS 6 & WebKit:
http://developer.apple.com/library/ios/#releasenotes/General/RN-iOSSDK-6_0/_index.html#//apple_ref/doc/uid/TP40012166-CH1-SW19
supposing the id of the contenteditable div is 'editableDiv',
document.getElementById('editableDiv').focus();
**Updates
Could you try with something inside the div?
<script>
function showKeyboard() {
document.getElementById('content').focus();
}
</script>
<body onLoad="showKeyboard()">
<div id="content" contenteditable="true" height="1000"> </div>
</body>
It is impossible in iOS now :( https://github.com/jquery/jquery-mobile/issues/3016