In one of my Windows Phone application I am using webbrowser to display the html content. I am getting the html content by making post request to server. Here I am getting the response correctly.Then I am displaying this response in webbrowser by,
webBrowser.IsScriptEnabled = true;
webBrowser.NavigateToString(responseString);
The response is:
<html>
<HEAD>
<script language='JavaScript'>
</script>
<SCRIPT language='JavaScript' src='script/page.js'></SCRIPT>
<script type="text/javascript" charset="UTF-8" src="js/page2.js"></script>
</HEAD>
<BODY onload='someFunction()'>
<div>
--
<img src='Images/loader.gif' /><br /><br />
--
</div>
</BODY>
</HTML>
From here I am not able to call the page.js file, page2.js file and not able get the loader.gif image also. I think this is because the files are not locally stored.
I also tried by saving the response in Isolatedstorage as .html file. and displaying it
by using,
webBrowser.IsScriptEnabled = true;
webBrowser.Navigate(uri);
but here also I am getting same thing.
Please help me to get resolve this issue. Thanks in adcvance
The scripts and images aren't loaded, because paths to it in the html are relative. When you save it to a file, the scripts and image should be in relative locations to that file.
You should use webBrowser.Navigate with the Uri of the web page on the net (don't download it yourself, let the browser do it). Or the html has to have the full paths, like: <img src='http://contoso.com/Images/loader.gif' />.
Related
i am trying to reduce my webpage load time . When i am searching i come to this point preload css and javascript .
So i am trying to implement this in my html page please see my html code before and after implementation
before
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" rel="stylesheet" type="text/css"> ...........
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js" type="text/javascript"></script>
</body>
</html>
After implementation i change like this
<html>
<head>
<link rel="preload" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" as="style">
<link rel="preload" href="assets/js/jquery-1.12.4.min.js" as="script">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700">
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js"></script>
</body>
</html>
But i can't notice any increase in speed . So please help to make this in correct way
i read the following article
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content .
But i can't figure out . Please help .
Or is there is any better method for page speed ?
Why this doesn't work
Preloading resources that are loaded directly in the HTML is useless. This is because the browser reads the preload at the same time as the actual resource reference.
Preloading is useful to reduce the length of your request waterfall.
Imagine the following situation:
style.css
body {
background-image: url(myimage.png);
}
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
The process of loading the above page consists (roughly) of the following steps:
Download index.html
Parse the HTML file
Because of the link tag, download style.css
Parse the CSS file
Because of the background-image, download myimage.png
Parse the image and display it on the screen
This means your request waterfall is index.html -> style.css -> myimage.png.
By adding a preload for myimage.png the browser can download the image earlier, so your request waterfall becomes:
index.html +-> style.css
+-> myimage.png
Instead of 3, it is now only 2 requests long, which means faster load times.
What else can you do to improve (perceived) page load times?
Some common ways are:
Minify your assets (JavaScript, stylesheets)
Ensure your server has compression enabled for static assets
Only load resources actually required on page load first, then load other scripts later (like those for user interactions).
But to get a better overall view of the things you can improve you can use the Chrome Audit system (Lighthouse).
https://developers.google.com/web/updates/2016/03/link-rel-preload
See the above article link. I saw the link shared above. Preload never makes the page load the page fast. It only gives the priority to the files which is declared rel="preload" to load very early as the page loads up. You can read the article again Also the article shared by me. It will say the same.
You will need other methods to load the page fast. This method will not be helpful. There are few methods listed below you can use to make page load faster.
You can minify css and js files which will load very very fast than normal file.
You can minify script and css files from (https://www.minifier.org/) here.
Avoid external links of css and js files
Avoid spaces and Newlines in code.
Use compressed images which will also load faster.
Enable Caching.
When i open an swf file, Google Chrome downloads it, when it's already downloaded.
And then says "this kind of file can harm your computer", and it just wont play it.
I'm a sysadmin and today a user brought this to my attention. It seems that Chrome no longer supports the direct opening of these file types. Make sure you have the relevant adobe flash version installed and then use IE11 or Firefox. For more info see here: https://bugs.chromium.org/p/chromium/issues/detail?id=767342
Mike
Imbed the swf files in HTML and then load the html page. Note that you wont be able to directly access the HTML page, put the html folder structure in local tomcat and then access the content and obviously enable the flash player on chrome.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="CaptivateContent">
</div>
<script type="text/javascript">
var so = new SWFObject("viewer.swf", "Captivate", "1025", "810", "10", "#CCCCCC"); //change the swf file name
so.addParam("quality", "high");
so.addParam("name", "Captivate");
so.addParam("id", "Captivate");
so.addParam("wmode", "window");
so.addParam("bgcolor","#f5f4f1");
so.addParam("menu", "false");
so.addParam("AllowScriptAccess","always");
so.addVariable("variable1", "value1");
so.setAttribute("redirectUrl", "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash");
so.write("CaptivateContent");
</script>
<script type="text/javascript">
document.getElementById('Captivate').focus();
document.Captivate.focus();
</script>
</body>
</html>
This is my index.html file
<html>
<head>
<title>VR Sample</title>
<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
</head>
<body>
<div id="vrview">
<iframe width="100%"
height="300px"
allowfullscreen
frameborder="0"
src="http://storage.googleapis.com/vrview/index.html?image=ffff.jpg&is_stereo=true">
</iframe>
</div>
</body>
</html>
And this is the structure of the website folder
I tried hosting it in Webserver for chrome as per the instructions in the google codelabs. But I clicked the 127.0.0.1.8887 url, I got a blank page with no files or folders. Then I tried hosting it on XAMPP and It did work. However, I did not get the panaroma image. Instead I got this error
I took the 360 image with google camera app and converted it to stereo with the google's online converter but got the same error. I also tried downloading the VRView repo from github and modified the code as
src="vrview/index.html?image=ffff.jpg&is_stereo=true"
that too didn't work.
You are using the iframe version of vrview meaning when you request "ffff.jpg", you are actually requesting:
http://storage.googleapis.com/ffff.jpg
Try using the javascript version
Try this:
<html>
<head>
<script src="http://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
<script>
window.addEventListener('load', onVrViewLoad);
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
image: 'http://storage.googleapis.com/vrview/examples/coral.jpg',
is_stereo: true,
width: '100%',
height: 300
});
}
</script>
</head>
<body>
<div id="vrview"></div>
</body>
</html>
Note: chrome cannot access files off a harddrive.
EDIT: This is due to CORS.
Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.
Thanks to #Eleanor Zimmermann for noting this.
I'm working on an application that embeds PDFs into a webpage using the <object> tag. Here is the HTML that I'm using:
<object data = "C:/full/path/to/some_file.pdf" type = "application/pdf" width = "100%" height = "100%">
<p>It appears you don't have a PDF plugin for this browser.
Click here to download the file.
</p>
</object>
The paragraph about not having the PDF plugin pops up and the link is there with the correct filepath, but when I click the link nothing happens. What could be causing this? I thought it might be the preceeding "file:///", but when I remove that I get the error about "c" not being associated with any programs.
Here is the (very!) basic structure of my page:
<html>
<head>
...
</head>
<body>
<div>
<div>
<div>
<div>
<iframe src = "dynamically_generated.html">
<html>
<head></head>
<body>
<object type = "application/pdf" ...></object>
</body>
</html>
</iframe>
</div>
</div>
</div>
</div>
</body>
</html>
If more information is needed, please let me know. Thanks!
If the problem is the linking to the PDF document, then you could try by changing the URLs from absolute (meaning all the file:///c:/...) to relative by chaining it using .. to go one level up, say, the HTML file is in the path C:/full/path/to/file.html and the PDF file is along (in the same folder) as the HTML file, then you can just write some_file.pdf without the full path C:/full/path/to/some_file.pdf.
On Windows, and according to Wikipedia, all of these are valid paths for a local file:
file://localhost/c|/WINDOWS/clock.avi
file:///c|/WINDOWS/clock.avi
file://localhost/c:/WINDOWS/clock.avi
The preceeding file:/// is important because it tells the browser it's a local file and not a file somewhere in a website.
Be aware though that some browsers (Firefox included) will refuse to link to a local file from a web URL (starting with (http|https)://) so that may give you problems as well (for more information, check this answer).
I have a layout which loads all my common resources used throughout my app but when I load a page via ajax the gsp itself renders and I can see that the ajax call downloads the js file (via firebug) but the actual code does not get executed.
I have tried the following ways to download and execute the js file from the ajax loaded page with no success. Any help will be appreciated.
Approach used
<r:require modules="announcements" />
<r:layoutResources/>
Result: js file downloaded but not executed
Approach used
<g:javascript library="announcements"/>
with and without
<r:layoutResources/>
Result: File not downloaded
Approach:
<script type="text/javascript" src="js/announcements.js"></script>
Result: http code 302 temporary move and attempt to download of js/static/announcements.js
which gives a http code 200 but firebug shows that it is still waiting for the file and thus it's not executed.
layout.gsp:
<html>
<head>
...
<g:if test="${session.isLoggedIn}">
<r:require modules="ui, jqueryDateFormat, loggedin" />
</g:if>
<g:else>
<r:require modules="ui" />
</g:else>
<r:layoutResources/>
<g:layoutHead />
</head>
...
</html>
ajax loaded page
<html>
<head>
<all methods mentioned above>
...
</head>
<body>
...
</body>
</html>
UPDATE: I resolved the issue. Turns out there was a syntax error in my JS file. Firebug did not identify error, it just stopped because the JS crashed. Had to move the library call to my layout to find the error. Fixed the JS and moved added the line back to the gsp and all worked again.
This is the most correct method.
<script type="text/javascript" src="js/announcements.js"></script>
You should check your webserver configuration if 302 produce 200 but file isn't downloaded