Including JS and CSS in an HTML document?
Question
I'm running an http server instance with Go and I would like to return the HTML doc to a client, but the JS and the CSS files are not working. How do I make the JS and CSS get sent along with the HTML if they are in different files?
Go Code
package main
import (
"fmt"
"io/ioutil"
"net/http"
)
func main() {
http.HandleFunc("/", handler)
http.ListenAndServe(":8080", nil)
}
func handler(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "text/html")
file, _ := ioutil.ReadFile("webpage.html")
s := string(file)
fmt.Fprintf(w, s)
}
webpage.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>html file</title>
<link rel="stylesheet" type"text/css" href="styles.css"/>
</head>
<body>
<h1>Click to change color</h1>
<script src="changeColor.js"></script>
</body>
</html>
And changeColor.js
function init(){
var h1tags = document.getElementsByTagName("h1");
h1tags[0].onclick = changeColor;
}
function changeColor(){
this.style.color = '#000000';
}
onload = init;
CSS is in a file called styles.css in the same directory as the HTML doc.
3 answers
solution1
0 2018-02-08 08:00:40
In your Go code, you need to do it like this :
func main() {
http.HandleFunc("/", handler)
http.HandleFunc("/changeColor.js", func(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "changeColor.js")
})
http.HandleFunc("/styles.css", func(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "styles.css")
})
http.ListenAndServe(":8080", nil)
}
Because go server for this line
<link rel="stylesheet" type"text/css" href="styles.css"/>
looks this pattern "/styles.css" and your server does not handle this request.
And you can replace this code
http.HandleFunc("/", handler)
whit this
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "webpage.html")
})
solution2
0 2018-02-08 10:51:26
You can set up a file server for handling static content(eg css,js,img). For example, you have a directory structure as below.
static
css
styles.css
js
changeColor.js
func main() {
http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
// other handlers
http.ListenAndServe(":8080", nil)
}
And you can access CSS and js in your HTML file as below
<link rel="stylesheet" type"text/css" href="/static/css/styles.css"/>
solution3
0 2018-02-08 22:45:11
Here's an example of working code:
package main
import (
"fmt"
"io/ioutil"
"net/http"
"log"
)
func main() {
http.HandleFunc("/", handler)
http.ListenAndServe(":8080", nil)
}
func handler(w http.ResponseWriter, r *http.Request) {
log.Println("Got request:", r.URL.Path)
var contentType string
var fileName string
switch r.URL.Path {
case "/":
contentType = "text/html"
fileName = "webpage.html"
case "/changeColor.js":
contentType = "text/javascript"
fileName = "changeColor.js"
case "/styles.css":
contentType = "text/css"
fileName = "styles.css"
default:
w.WriteHeader(http.StatusBadRequest)
log.Println("Bad request (unknown file)")
return
}
file, err := ioutil.ReadFile(fileName)
if err != nil {
w.WriteHeader(http.StatusNotFound)
log.Println("File not found")
return
}
w.Header().Set("Content-Type", contentType)
s := string(file)
fmt.Fprintf(w, s)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.