I have loaded local html using Android WebView renderer. The html is loading properly. But the scripts which is referred inside html file is not loaded. The script files are located inside the assets folder.
Render File Code
protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
{
base.OnElementChanged(e);
if (Control == null)
{
var webView = new Android.Webkit.WebView(Forms.Context);
webView.Settings.JavaScriptEnabled = true;
if (Build.VERSION.SdkInt >= Build.VERSION_CODES.JellyBean)
{
webView.Settings.AllowUniversalAccessFromFileURLs = true;
webView.Settings.AllowFileAccessFromFileURLs = true;
}
SetNativeControl(webView);
}
if (e.NewElement != null)
{
Control.LoadUrl("file:///android_asset/Sample/index.html");
}
}
Html Code
<!DOCTYPE html>
<html class="no-js">
<head>
<script src="file:///android_asset/jquery-1.10.2.min.js"></script>
<!-- Render -->
<script src="file:///android_asset/epub.min.js"></script>
<script type="text/javascript">
var book = ePub("file:///android_asset/Sample/Azure_Cosmos_DB_and_DocumentDB_Succinctly/);
$(document).ready(function () {
book.renderTo("area");
});
</script>
</head>
<body>
<div id="main">
<div id="prev" onclick="book.prevPage()" style="font-size: 64px;cursor:pointer;" class="arrow">‹</div>
<div id="area" ></div>
<div id="next" onclick="book.nextPage()" style="font-size: 64px;cursor:pointer;" class="arrow">›</div>
</div>
</body>
</html>
Can anyone suggest me to load corresponding JS files in webview rendering method?
Normally you would place your script tag at the bottom of your HTML not in the top.
<!DOCTYPE html>
<html class="no-js">
<head>
</head>
<body>
<div id="main">
<div id="prev" onclick="book.prevPage()" style="font-size: 64px;cursor:pointer;" class="arrow">‹</div>
<div id="area" ></div>
<div id="next" onclick="book.nextPage()" style="font-size: 64px;cursor:pointer;" class="arrow">›</div>
</div>
</body>
<script src="file:///android_asset/jquery-1.10.2.min.js"></script>
<!-- Render -->
<script src="file:///android_asset/epub.min.js"></script>
<script type="text/javascript">
var book = ePub("file:///android_asset/Sample/Azure_Cosmos_DB_and_DocumentDB_Succinctly/");
$(document).ready(function () {
book.renderTo("area");
});
</script>
</html>
You have also forgot a " at the end of var book = ePub("file:///android_asset/Sample/Azure_Cosmos_DB_and_DocumentDB_Succinctly/");
Related
I want to have a Chrome Extension that changes when a button is clicked. However, it does not work.
This is the HTML Code which I want to alternate:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="modal-content">
<input type="text" id="myText" value="Notes...">
<button type="button" id="copyNote">Save Note</button>
<div id="Notes">ssss</div>
</div>
</body>
</html>
The following javascript is supposed to change the HTML:
document.addEventListener('DOMContentLoaded', function() {
var copyNote = document.getElementById('copyNote');
// onClick's logic below:
copyNote.addEventListener('click', function() {
saveNote;
});
});
function saveNote(){
var Note1 = document.getElementById("myText").value;
document.getElementById("Notes").innerHTML = "xxxxxxx";
}
i am trying to get html string from my site as it presented in browser
firstly i tried to use web client
using (var client = new WebClient())
{
var content = client.DownloadString("my_site_address");
}
but in my site i have some javascript code that change the view (and webClient does not run javascript)
so i use wpf WebBrowser and after nevigate to the desire site it show the page (as expected) but when i try to get the html string it show just like the webClient
dynamic doc = MainBrowser.Document;
var htmlText = doc.documentElement.InnerHtml;
this is how i get the html:
<!DOCTYPE html>
<head>
<title>Title</title>
</head>
<body>
<div class="conteiner">
<div class="matrix">
<script type="text/javascript">
// some script code
</script>
<script type="text/javascript" src="xxx"></script>
Matrix
</div>
<div class="zoom">
Zoom
</div>
</div>
<div class="test">
<script type="text/javascript">
// some script code
</script>
<script type="text/javascript" src"xxx2"></script>
</div>
</body>
</html>
and this is how i should get it after the javascript change it:
<html><head>
<title>Title</title>
</head>
<body>
<div class="conteiner">
<div class="matrix">
<script type="text/javascript">
</script>
<script type="text/javascript" src="xxx"></script><iframe ></iframe><script ></script><div ><div ><iframe >
<html><head>
<title></title>
</head>
<body>
<div >
<ul><li><ol><li <a </a></li></ol></li></ul> </div>
</body></html>
</iframe></div></div></div>
Matrix
</div>
<div class="zoom">
Zoom
</div>
</div>
<div class="test">
<script type="text/javascript">
</script>
<script type="text/javascript" src="xxx2"></script><div ><div ><div ><iframe ></iframe></div></div></div>
</div>
</body></html>
Please help :)
You can use the WebDriver framework from Selenium. It offers different web driver implementations, like for Internet Explorer or Firefox.
Here is some sample code to request a web site with Internet Explorer, let it render and finally save the final HTML markup.
public class WebSiteHtmlLoader : IDisposable
{
private readonly RemoteWebDriver _remoteWebDriver;
public WebSiteHtmlLoader(RemoteWebDriver remoteWebDriver)
{
if (remoteWebDriver == null) throw new ArgumentNullException("remoteWebDriver");
_remoteWebDriver = remoteWebDriver;
}
public string GetRenderedHtml(Uri webSiteUri)
{
if (webSiteUri == null) throw new ArgumentNullException("webSiteUri");
_remoteWebDriver.Navigate().GoToUrl(webSiteUri);
return _remoteWebDriver.PageSource;
}
public void Dispose()
{
Dispose(true);
GC.SuppressFinalize(this);
}
private void Dispose(bool disposing)
{
if (disposing)
{
if (_remoteWebDriver != null)
{
_remoteWebDriver.Quit();
}
}
}
}
Usage:
class Program
{
static void Main(string[] args)
{
if (!args.Any())
{
return;
}
var pageUrl = args.First();
var options = new InternetExplorerOptions
{
IntroduceInstabilityByIgnoringProtectedModeSettings = true,
PageLoadStrategy = InternetExplorerPageLoadStrategy.Eager
};
using (var htmlLoader = new WebSiteHtmlLoader(new InternetExplorerDriver(options)))
{
var html = htmlLoader.GetRenderedHtml(new Uri(pageUrl, UriKind.Absolute));
File.WriteAllText(#"C:\htmlloadertext.html", html);
}
}
}
You could try to use the WebBrowser.DocumentText property. Like, add a hidden WebBrowser control to your application and call Navigate() function, then call the property to get the generated HTML
More info at: http://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser.documenttext.aspx
I've got such simple html.
vkbeatuify.js is located in the same folder.
<html>
<head>
<script type="text/javascript" src="vkbeautify.js"></script>
<script>
var variable = vkbeautify.xml("<root><cat></cat></root>");
document.getElementById('data').innerHTML = variable;
</script>
</head>
<body>
<div id="data">
</div>
</body>
</html>
But when I open page in browser Firefox - it displays nothing.
What is the problem?
This example works, but if i create local file like this:
<script src="jquery-big.js"></script>
<div id="test">
<div id="hello">click</div>
<div id="no-hello">click</div>
</div>
<script>
$('#test').click(function() {
if ($('#hello').is(':hover')) {
$('#hello').html($('#hello').html()+' strange ');
}
});
</script>
(removed all utf-8 bug-symbols from jsfiddle) - nothing works, and no errors in console. checked in Google Chrome 19.0.1084.46.
try like this~
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>question</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//document ready script here
$(document).ready(function() {
$('#test').click(function() {
if ($('#hello').is(':hover')) {
$('#hello').html($('#hello').html()+' strange ');
}
});
});
</script>
</head>
<body>
<!-- element below-->
<div id="test">
<div id="hello">click</div>
<div id="no-hello">click</div>
</div>
</body>
</html>
First off here is the code!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="content/wmd.css" rel="stylesheet" type="text/css" />
<title>some title </title>
</head>
<body>
<div class="main">
<form>
<h2>Only teaxt area</h2>
<div id="wmd-editor-uno" class="wmd-panel">
<div id="wmd-button-bar-uno" class='wmd-button-bar'></div>
<textarea name='id-uno' id='id-uno'></textarea>
</div>
</form>
</div>
<script type='text/javascript' src="Scripts/mootools-yui-compressed.js"></script>
<script type='text/javascript' src="Scripts/moowmd.js"></script>
<script type="text/javascript">
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});
</script>
</body>
</html>
Bam!
My problem is this, it doesn't work like the example at mooWMD tutorial all I get is an empty text area with the wmd.css style applied to it. I cant figure out what I could be doing wrong. All the file locations are correct but i get 'mooWMD' is undefined. I am at a loss any and all suggestions are appreciated.
The problem (for later generations) is IE does not accepts the following syntax:
{
att1: 'value',
att2: 'value'
}
Where other browsers do.
I changed it to
{
'att1': 'value',
'att2': 'value'
}
And it is fine now.
(using the mailing list would have gotten my attention earlier)
The code in the local javascript tag executes as soon as the tag is processed. This may happen before moowmd.js has completed loading.
Wrap the code in a function:
<script type="text/javascript">
function loaded() {
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});}
</script>
Then add an onload handler to your body tag:
<body onload="loaded();">
The onload handler will not fire until all the javascript, images, css, etc have loaded.
<head>
<title>some title </title>
<link rel="stylesheet" type="text/css" href="Content/wmd.css" />
<script type="text/javascript" src="Scripts/showdown.js"></script>
</head>
<body>
<div class="main">
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar">
</div>
<textarea id="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel">
</div>
<div id="wmd-output" class="wmd-panel">
</div>
</div>
<script type="text/javascript" src="Scripts/wmd.js"></script>
</body>
The root of the problem ended up being the moowmd editor just didn't work consistently in IE. The reason I was tiring to go with the moowmd was I liked how he handled setting up multiple editors. I ended up just switching to stackoverflow's branch of wmd it is working well so far.