diff options
Diffstat (limited to 'book/src/main/scalatex/book/handson/ClientServer.scalatex')
| -rw-r--r-- | book/src/main/scalatex/book/handson/ClientServer.scalatex | 15 |
1 files changed, 13 insertions, 2 deletions
diff --git a/book/src/main/scalatex/book/handson/ClientServer.scalatex b/book/src/main/scalatex/book/handson/ClientServer.scalatex index 48d35f2..50afe76 100644 --- a/book/src/main/scalatex/book/handson/ClientServer.scalatex +++ b/book/src/main/scalatex/book/handson/ClientServer.scalatex @@ -1,5 +1,12 @@ @import BookData._ +@def lazyload(id: String) = script(raw(""" + document.addEventListener("load", function(){ + document.getElementById(id).src = 'https://hands-on-scala-js.herokuapp.com/' + }) +""")) + + @p Historically, sharing code across client & server has been a holy-grail for web development. There are many things which have made it hard in the past: @@ -75,7 +82,9 @@ @p Now, if we go to the browser at @code{localhost:8080}, we should see our web-page! - @iframe(src:="https://hands-on-scala-js.herokuapp.com/", width:="100%", height:="350px", "frameBorder".attr:="0") + @iframe(id:="heroku1", width:="100%", height:="350px", "frameBorder".attr:="0") + @lazyload("heroku1") + @p This is a real, live example running on a @lnk("Heroku server", "https://hands-on-scala-js.herokuapp.com/"). Feel free to poke around and explore the filesystem on the server, just to convince yourself that this actually works and is not just a mock up. @@ -215,7 +224,9 @@ @p Other than that, nothing much has changed. If you've done this correctly, the web application will look and behave exactly as it did earlier! - @iframe(src:="https://hands-on-scala-js.herokuapp.com/", width:="100%", height:="350px", "frameBorder".attr:="0") + @iframe(id:="heroku2", width:="100%", height:="350px", "frameBorder".attr:="0") + @lazyload("heroku2") + @p So why did we do this in the first place? |