I'm building an HTML5 app that uses Google Doubleclick ads. 99% of the app is dynamically built with JS, but the ads are hardcoded into the html like so:
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-3664602748600160");
GS_googleEnableAllServices();
GA_googleAddSlot("ca-pub-3664602748600160", "125x125");
GA_googleAddSlot("ca-pub-3664602748600160", "250x250");
GA_googleAddSlot("ca-pub-3664602748600160", "160x600");
GA_googleAddSlot("ca-pub-3664602748600160", "468x60");
GA_googleFetchAds();
</script>
<div id="ads" style="float:right;">
<div id="square" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("250x250");
</script>
</div>
</div>
<div id="small_square" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("125x125");
</script>
</div>
</div>
<div id="tall_banner" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("160x600");
</script>
</div>
</div>
<div id="half_banner" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("468x60");
</script>
</div>
</div>
These ads are then hidden/shifted as needed to fill the various ad spots on the generated pages. When i implemented a manifest file to cache persistent assets i get a message that it has failed to load the http://partner.googleadservices.com/gampad/google_service.js file. Knowing this, I tried saving a local copy of that js file and including it in the manifest, but this led to errors regarding the GA_googleblahlah calls being undefined which seems to indicate a load order issue of some sort. Is there some way to exempt this file from cache?
I found the solution. Using a wildcard in the network area after defining the cached elements seems to have fixed the issue. My manifest file now looks like this:
CACHE MANIFEST
CACHE:
/js/jquery.min.js
/js/jquery.easing.1.3.js
/etc
NETWORK:
*
Thanks to Ben Poole for the pointers.
If you don't want a file to cache you add it to the NETWORK: section of your manifest file. From Dive Into HTML5:
The line marked NETWORK: is the beginning of the “online whitelist”
section. Resources in this section are never cached and are not
available offline. (Attempting to load them while offline will result
in an error.)
Related
I am having trouble getting files such as index.html, main.js, style.css and more on my server made in Go.
My html file works fine with javascript and css on my local file but I can not make it work on a server.
I already tried making this in my code, but it only starts html file and javascript, css, jquer, font are listed in console like the page was not found (404 Page not found).
r := mux.NewRouter()
r.Handle("/", http.FileServer(http.Dir("./static")))
r.HandleFunc("/events", eventHandler) //Ignore this
r.NotFoundHandler = http.HandlerFunc(notFound) //This is just a custom 404.
// Create and start HTTP server.
s := &http.Server{
Handler: r,
Addr: config.Address,
}
My question is:
Is there any possibility to do this without Node.js. Is there any option that will display all my javascript files and css in the html. I really would not like to get this things complicated with Node.
Note
My codes for html, css, javascript all work. My server also works, the only thing needed now is adding the files to the server.
This is what I get This is what I should get on server.
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="jquery-3.3.1.min.js"></script>
</head>
<body id='body'>
<div class="app-body">
<div id='left' class="left">
<div class='conferenceRoom'>Conference room
<h1 class="roomName">crane
</h1>
</div>
<div class="status">
<h1 id="free_busy" class="free_busy"></h1>
<h1 id="duration" class="duration"></h1>
</div>
</div>
</div>
<div class="right">
<div class="date" id="date"></div>
<div id='eventList' class="eventList"></div>
</div>
</div>
<script src="main.js"></script>
</body>
index.html
This are my files in a directory called Website. Server is started by:
go run *.go -c config.toml
This is ran from the website folder. And this is what the files look like
The problem is you're trying to feed a http.FileServer to Gorilla mux's route.Handle function. This handles a single URL, so it's only valid for the given URL, /.
What you want for serving static files is a route.PathPrefix(). This serves any URL path which begins with the given string, while route.Handle() serves only a path which matches the string exactly.
package main
import (
"log"
"net/http"
"github.com/gorilla/mux"
)
func main() {
r := mux.NewRouter()
r.PathPrefix("/").Handler(http.FileServer(http.Dir("./static")))
// Create and start HTTP server.
s := &http.Server{
Handler: r,
Addr: ":8009",
}
log.Fatalln(s.ListenAndServe())
}
I have create a simple page using AngularJs. When I'm trying to include header.htm in index.html, nothing is appearing in browser.
index.html
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="">
<div ng-include="'views/header.htm'"></div>
</div>
</body>
</html>
header.htm
<h1>Header</h1>
You have not shown your folder structure and more over the definition of header.html.From next time try to create MCVE.
I created a fiddle to show how it works.
<div ng-controller="Ctrl">
<div ng-include ="'header.html'" onload='myFunction()'></div>
</div>
<!-- header.html -->
<script type="text/ng-template" id="header.html">
Content of Header html
</script>
function Ctrl($scope) {
$scope.myFunction = function() {
alert('header loaded');
}
}
Welcome aboard!
Please provide some logs so we know better about the situation. Also consider reading How to Ask.
You can show console errors in...
Chrome with
Alt+CMD+J on Mac OS, with (i suppose) Ctrl+Alt+J on Windows
Firefox with
Alt+CMD+K on Mac OS, with (i suppose) Ctrl+Alt+K on Windows
Now to my answer: You request views/header.htm so your file structure needs to look like this:
- index.html
- views
- header.htm
To test your site locally use a tool like http-server. Or when you are on a Mac or Unix based machine you can simply run python -m SimpleHTTPServer in your projects directory.
Hope that helped.
My cache manifest file looks like:
CACHE MANIFEST
calendar.html
scripts/jquery.js
scripts/calendar.js
NETWORK:
https://apis.google.com/js/client.js
My calendar.html looks something like:
<html manifest="calendar.cache">
<head>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/calendar.js" type="text/javascript"></script>
<script src='https://apis.google.com/js/client.js?onload=checkAuth'></script>
</head>
<body>
<div id="authorize-div" style="display: inline">
<span>Authorize access to Google Calendar API</span>
<!--Button for the user to click to initiate auth sequence -->
<button id="authorize-button">
Authorize
</button>
</div>
<pre id="output"></pre>
<script>
$(document).ready(function(){
console.log("ready");
})
</script>
</body>
</html>
If I disable the cache everything works fine. However, when the cache is enabled I get an error for the apis.google.com/js/client.js file. The error is jquery.js:5 GET https://apis.google.com/js/client.js?onload=checkAuth&_=1474962265124 net::ERR_FAILED. This is for google chrome browser, but I get a similar error for firefox. What am I missing?
This is caused due to those parameters which you are passing for client.js ie.?onload=checkAuth
In web whenever you pass any parameter that request is considered unique.So as far as the browser is concerned scripts declared in your manifest aren't the same
https://apis.google.com/js/client.js // script A
https://apis.google.com/js/client.js?onload=checkAuth //script B ≠ script A
But in calendar.cache you have declared only script A as non-cached.So now you can guess changing manifest to below would solve the issue
CACHE MANIFEST
calendar.html
scripts/jquery.js
scripts/calendar.js
NETWORK:
https://apis.google.com/js/client.js?onload=checkAuth
Ofc just removing onload=checkAuth could also work in-case you don't need the callback.Just wipe entire cache and reload to see the magic!
When I reload a page called Donkey.aspx, there's a breakpoint being hit on the method below.
protected void Application_BeginRequest(object sender, EventArgs e)
{
if (application.Request.Url.AbsolutePath.EndsWith(".blopp")) { ... }
}
The problem is that all I get to see is a hit on the Donkey.aspx and another file (the one with id __browserLink_initializationData) referenced by it, only. However, there's a bunch of other references to files and those are not causing hits on the method. The end of the produced page looks like this.
<script type="text/javascript" src="/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.placeholder.js"></script>
<script src="beep.blopp" type="text/javascript"></script>
<script src="typeahead.bundle.min.js" type="text/javascript"></script>
<script type="text/javascript" src="utils.js"></script>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR"
id="__VIEWSTATEGENERATOR" value="54ACFC5B" />
</div>
</form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"f51b45a6ac174b6e8880184492a80734"}
</script>
<script type="text/javascript" src="http://localhost:64593/9...7/browserLink" async="async">
</script>
<!-- End Browser Link -->
</body>
Accessing another page gives me the expected behavior, namely a bunch of hits on the event handler above, including CSS-files etc. Notable is that the files do indeed get loaded, as verified by the functionality of the scripts, console status codes (200 and 304 all around). The master page is virtually empty.
I'm at loss on what's wrong and even more uncertain on how to trouble-shoot it.
Static files are usually cached by browser. Turn off browser cache or reload all from server (Ctrl+F5).
We have a GWT app that displays ads on the page with this code:
<script type="text/javascript" language="javascript" src="app/app.nocache.js"></script>
<body>
<div id="top-ads-placeholder" class="uk-hidden-small uk-hidden">
<div id="top-ads-small" class="uk-hidden-small">
<script type='text/javascript' src='http://ads.qadservice.com/t?id=123'></script>
</div>
<div id="top-ads-large" class="uk-hidden-medium uk-hidden-large uk-container-center uk-width-1-1">
<script type='text/javascript' src='http://ads.qadservice.com/t?id=123'></script>
</div>
</div>
</body
The problem with this code is its a blocking and it delays the loading of the app. What we want is to make sure that the GWT app has fully loaded (especially its UI) before the ads script will even load. Is that possible?
You can add this block to the page at the end of your onModuleLoad() or whenever you think your app is ready.