Android load html file with javascript in webview getting Uncaught ReferenceError - javascript

I am trying to load the html file into Webview downloaded from server. The html file contains the javascript and it is saved in application cache folder. The Webview shows only blank white screen and in log i see this error.
Uncaught ReferenceError: refresh_rates is not defined at file:///data/data/com.app.package/files/aboutus.html:1
Html file source:
<html>
<head>
<style type="text/css">
<!--
body { margin: 0px 0px 0px 0px; }
-->
</style>
<script>
<!--
var intervalID;
function setUpdateRates()
{
refresh_rates ();
intervalID = setInterval(refresh_rates, 50000);
}
function refresh_rates () {
var url ='http://www.google.com';
//alert(url);
document.getElementById('rates').src = url;
}
-->
</script>
</head>
<body onload="setUpdateRates();">
<iframe name="rates" id="rates" src="" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto"></iframe>
</body>
</html>
Webview:
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
Loading html file in Webview:
mWebView.loadUrl(mFileLoader.getFilePath(CACHE_HTML));
Please let me know where i am going wrong.

It seems the problem is with commenting tags. So after removing this <!-- , --> and // tags it got worked.

Related

Import JavaScript tag inside script in HTML

I am making a HTML5 widget for a SCADA.
The widget generates a custom_widget.js, witch I have modified to this.
// Subscribes to receive property changes
cwidget.on("Data", function() {
var Data = document.getElementsByName("Data")
var Data.scr = cwidget.Data;
});
The custom_widget.js is called in my HTML.
And I would like to use the Data tag inside a Script, in the HTML.
What is the syntax for importing the tag in the HTML?
From the technical manual for the SCADA program, I have this example.
HTML
<!DOCTYPE html>
<html style="overflow: hidden;">
<head>
<script src="../Resources/Apis/Proxy.js" cwidget="MyWidget"></script>
<script src="./custom_widget.js"></script>
<title>MyWidget</title>
</head>
<body>
<iframe id="myFrame" style="width: 100vw; height: 100vh;"></iframe>
</body>
</html>
custom_widget.js
cwidget.on("URL", function() {
var myFrame = document.getElementById("myFrame");
myFrame.onload = cwidget.dispatchEvent("PageLoaded");
myFrame.src = cwidget.URL;
});

Chrome Print Dialog Closing

Why is the following page un-printable on google chrome? JSFiddle
<!doctype html>
<html>
<head></head>
<body>
<iframe id="f" src="http://placehold.it/350x1500?q=1"></iframe>
<script>
window.addEventListener("resize",function () {
var f = document.querySelector("#f");
f.src = f.src+"1";
f.style.height="2000px";
});
</script>
</body>
</html>
If you can't replicate the issue, I am using Google Chrome 55.0.2883.95 (Official Build) (64-bit), and my screen size is 1920x1080
Even more interesting, it still can't print when you have display: none set. JSFiddle
<!doctype html>
<html>
<head></head>
<body>
<iframe id="f" src="http://placehold.it/350x1500?q=1" style="display: none"></iframe>
<script>
window.addEventListener("resize",function () {
var f = document.querySelector("#f");
f.src = f.src+"1";
f.style.height="2000px";
});
</script>
</body>
</html>
Update
The f.style.height is not necessary, the main issue is the iframe src change (a widget needs a size parameter in its location)
It's something to do with your resize handler. If you remove that code, it works fine. I believe you can accomplish what you're looking for in a CSS media query instead:
<iframe id="f" src="https://placehold.it/350x1500?q=1"></iframe>
#media print {
#f { height: 2000px }
}
https://jsfiddle.net/7x9sdf79/1/

alter page content with javascript

I have the next url: http://www.climatempo.com.br/tempo-no-seu-site/videos/selo/sul/420x315.
It points to a youtube video, but "the google video id" can change all day, because is a url to weather forecast. Only the url above is fixed.
I am using a digital signage software from a third party and I need create a layout to load this url.
With the software, when creating the layout I can enter the url above, and add custom html and script when the layout will be running.
I have checked with IE the source code when the url is loaded. It´s something as:
<html>
<title>Climatempo - Selo de Videos: SUL</title>
<body bgcolor="black" style="padding:0!important;margin:0!important" >
<iframe width="420" height="315" src="https://www.youtube.com/embed/YPlee8K0ViE" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Is possible create a javascript such as when I load the url: http://www.climatempo.com.br/tempo-no-seu-site/videos/selo/sul/420x315
it transforms this page to add "autoplay=1" as:
<html>
<title>Climatempo - Selo de Videos: SUL</title>
<body bgcolor="black" style="padding:0!important;margin:0!important" >
<iframe width="420" height="315" src="https://www.youtube.com/embed/YPlee8K0ViE?autoplay=1" frameborder="0" allowfullscreen></iframe>
</body>
</html>
I can use only javascript, no jquery.
Some help will be appreciated.
Thanks in advance, Luiz
//////////////////
Sorry, Mr Oliver, It doesnt work. Here is the source code of the page:
<!doctype html>
<html lang="en">
<head>
<title>Xibo Open Source Digital Signage</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=874.31921824104" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Copyright 2006-2014 Daniel Garner. Part of the Xibo Open Source Digital Signage Solution. Released under the AGPLv3 or later. -->
<style type="text/css">
body {
margin: 0;
overflow: hidden;
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
}
h1, h2, h3, h4, p {
margin-top: 0;
}
#iframe {
border: 0;
}
.cycle-slide p, p.cycle-slide {
margin-bottom:0;
}
</style>
<style type="text/css">
</style>
<link href="modules/preview/fonts.css" rel="stylesheet" media="screen"><style type="text/css"></style>
</head>
<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->
<!--[if IE 9 ]><body class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><body><!--<![endif]-->
<div id="content"><html>
<title>Climatempo - Selo de Videos: SUL</title>
<body bgcolor="black" style="padding:0!important;margin:0!important" >
<iframe id="myframe" width="420" height="315" src="http://www.climatempo.com.br/tempo-no-seu-site/videos/selo/sul/420x315" frameborder="0" ></iframe>
</body>
</html>
</body>
</html></div>
</body>
<script src="modules/preview/vendor/jquery-1.11.1.min.js"></script><script src="modules/preview/xibo-layout-scaler.js"></script><script type="text/javascript">
function EmbedInit()
{
// Init will be called when this page is loaded in the client.
var firstIframe = document.getElementsById("myframe");
//get the current source
var src = firstIframe.src;
//update the src with "autoplay=1"
var newSrc = src+'?autoplay=1';
//change iframe's src
firstIframe.src = newSrc;
return;
}
</script><script type="text/javascript"> var options = {"originalWidth":"874.31921824104","originalHeight":"436.5342019544","previewWidth":"1255.6954397394104","previewHeight":"626.9495114006552","scaleOverride":0}; $(document).ready(function() { EmbedInit(); });</script>
</html>
<!--[[[CONTROLMETA]]]-->
Try something like this:
HTML:
<html>
<title>Climatempo - Selo de Videos: SUL</title>
<body bgcolor="black" style="padding:0!important;margin:0!important" >
<iframe id = "myFrame" width="420" height="315" src="https://www.youtube.com/embed/YPlee8K0ViE" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Javascript:
var iFrame = document.getElementById("myFrame");
iFrame.src = iFrame.src + '?autoplay=1';
iFrame.contentWindow.location.reload();
Hope this helps.
So google have IFRAME API, but I'm not sure this will work with your software. Have you given this a thought.
https://developers.google.com/youtube/iframe_api_reference#Requirements
UPDATED - doesn't stop after 6 seconds.
HTML :
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
Javascript:
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'YPlee8K0ViE',
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
My Code Example: http://codepen.io/anon/pen/YwOVPR

How to change iframe src

Please bear with me if i'm asking something very basic as I don't know much about coding. I have a stock charting application which has a built-in web browser. I configured this browser to load a html page, which i coded as below, like this mypage.html?symbol=xzy, What i am trying to do here is to capture the submitted html variable, 'symbol' and use its value as part of the url string to load a portion of another third party webpage. I can't figure out what's wrong with my javascript code that is failing to set the value of the 'src' attribute. Any help is most appreciated.
<html>
<header>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
</header>
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
try move the script after html DOM
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
A couple of things: 1) start with performing the function onLoad - that way you know the script will run and popluate the src attribute after the browser renders it, and not before.
2) use a function to get the url value.
<html>
<header>
<script>
<!-- source: http://javascriptproductivity.blogspot.com/2013/02/get-url-variables-with-javascript.html -->
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] == VarSearch){
return KeyValuePair[1];
}
}
}
function SetContent(){
var symbol = GetUrlValue('symbol');
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
}
</script>
</header>
<body onLoad="SetContent();">
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
Move the javascript to the bottom of the page AFTER the iframe. You are trying to change an element before it is created. Also do src="about:blank" initially, so it validates.

Print pdf from iframe

I dynamically create a pdf in a iframe:
<iframe name="output" id="output"></iframe>
and try to print from it:
window.frames["output"].focus();
window.frames["output"].print();
But how you can see in this example:
http://jsfiddle.net/FEvq6/78/
It prints a blank site.
It prints blank page because you're printing the iframe itself. Here is what you should do:
1. The iframe should contain EMBED tag which will load the PDF (for some reason stack overflow did not formatted code well, please see paste bin link below):
< embed src="path_to_script_which_generates.pdf" type="application/pdf" id="pdf"
width="100%" height="100%">
< /embed>
2. Then you should call the EMBED object to print the document. But since it may require some time for it to load you would need a timeout:
var doPrinting = (id){
var pdfObject = document.getElementById(id);
if (typeof(pdfObject.print) === 'undefined') {
setTimeout(function(){ doPrinting(id); }, 1000);
} else {
pdfObject.print();
}
}
doPrinting('pdf');
Here is paste bin of the above: http://pastebin.com/s6qSTE8t
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<strike>funny</strike>.
<iframe src="file_to_print.pdf" class="frameSet" type="application/pdf" runat="server" name="I5" scrolling="yes" width="100%" height="400"> </iframe>
</body>
</html>

Categories

Resources