5

[GopherJS] HTML Web History API Example

 2 years ago
source link: http://siongui.github.io/2017/01/03/gopherjs-html-web-history-api-example/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

[GopherJS] HTML Web History API Example

January 03, 2017

Change browser URL without reloading the whole web page - only partially update the content of the web page, improve the user experience of visiting your website. This is done via HTML history API and GopherJS.

I simplify the example in the tutorial of CSS-Tricks [4]. In the example below, I create three links, and if users click the link, the browser URL will change, and update the texts correspondingly without reloading. When users move backward or forward through the history, web page will also be partially updated.

Demo

index.html | repository | view raw 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>GopherJS HTML History API Demo</title>
</head>
<body>

<div><a class="person" href="/p1/" data-content="content of person 1">person 1</a></div>
<div><a class="person" href="/p2/" data-content="content of person 2">person 2</a></div>
<div><a class="person" href="/p3/" data-content="content of person 3">person 3</a></div>
<hr>
<div id="info">Entry Page</div>

<script src="app.js"></script>
</body>
</html>

app.go | repository | view raw 

// Google Search: html history api
// https://css-tricks.com/using-the-html5-history-api/
package main

import "github.com/gopherjs/gopherjs/js"

var history = js.Global.Get("history")

func main() {
	d := js.Global.Get("document")
	info := d.Call("getElementById", "info")
	nodeList := d.Call("querySelectorAll", ".person")
	length := nodeList.Get("length").Int()
	for i := 0; i < length; i++ {
		// get i-th element in nodelist
		elm := nodeList.Call("item", i)

		elm.Call("addEventListener", "click", func(event *js.Object) {
			event.Call("preventDefault")

			href := elm.Call("getAttribute", "href").String()
			content := elm.Get("dataset").Get("content").String()
			history.Call("pushState", content, nil, href)
			info.Set("innerHTML", content)
		})
	}

	js.Global.Call("addEventListener", "popstate", func(event *js.Object) {
		if event.Get("state") == nil {
			info.Set("innerHTML", "Entry Page")
		} else {
			info.Set("innerHTML", event.Get("state").String())
		}
	})
}

To see demo: use GopherJS to compile app.go to app.js. Put index.html and app.js in the same directory. Open index.html with your browser.

For JavaScript verson, see [7].

Tested on:

  • Ubuntu Linux 16.10
  • Go 1.7.4
  • Chromium Version 55.0.2883.87 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)

References:

[3]Manipulating the browser history - Web APIs | MDN

[5][Golang] GopherJS DOM Example - Access HTML Data Attribute

[6][Golang] undefined Test in GopherJS


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK