Webview loading linked files


Hi, Im pretty new to Defold, but loving it so far.
I have been using the Webview extension, and I can get remote pages working no problems. However when I try to use local pages with linked content (like bootstrap js and css files) Im not certain how to put them in the html.
What I have done:

  • I made a folder (as recommended in the tutorial) and added it to the custom_resources for the project.
  • I then used sys.load_resource( “/custom_resources/tableview.html”) —> this works fine.

Within the tableview.html I have:
<link rel=“stylesheet” href=“refs:/custom_resources/bootstrap.min.css”>

I have tried refs:/ and file:/ and relative path etc. I cant seem to get anything to work.
This feels like it should be pretty simple . I would appreciate any help with this.



HI @dlannan!

What tutorial are you referring to?

custom_resources are put into our internal .darc file, in a custom format, and won’t be accessible by anything other than the engine itself, and the function sys.load_resources()

You can perhaps try using bundle_resourcesinstead, since then the resources will simply be put next to the executable (or the folder you specify), and then you should be able to refer to it.

1 Like


Hi Mathias,
The manual/tutorial here: https://defold.com/manuals/webview/
‘Opening and displaying a custom html page’

Thanks for the tip - I’ll try the bundle resources tonight.



Looks like bundle resources dont work either.
I might have a dig through the webview component and see whether it can access local files - maybe using the file:// mechanism or similar. It may be simply unsupported.
Im a bit surprised no-one has tried loading a local html file with webview that uses js or css files?

---- some additional notes ----
The code seems to indicate it should be able to access the applications ‘local’ storage. So the bundle_resources should technically work, assuming thats where they end up. Bit puzzling.



You can easily check the output folder after you’ve bundled the app?
Or if you’ve pressed Build HTML5, check your build folder of the project.



Ok. Not sure if Im doing silly things or not with webview :slight_smile: but I sure managed to break a few things along the way here. I finally found a way that works fine (for the time being).

I created a “body” html with all the normal things in it and place it in a custom_resources folder. I also put all the dependcies in there too (css files and js files). Then I load the html body using sys.load_resources which I put into a variable. I also load all the other dependencies and put into a variable.

When I load the dependencies though I made a couple of helper functions (for js and css specifically). They are here:

function loadJSscript( filename )
local text = sys.load_resource(filename)
return "<script>"..text.."</script>"

function loadCSSscript( filename )
local text = sys.load_resource(filename)
return "<style>"..text.."</style>" 

Then I generate my own header like so:

local headerstart = [[
<html class=" js no-touch cssanimations csstransitions" lang="en" style="">
<meta charset="utf-8">
<title>Project – Scenarist</title>
<meta name="description" content="Describe your website here.">
<meta name="generator" content="GravCMS">
local headerend = "</head>"

Then I add the sections together using string concat in lua like so:
local html = headerstart..cssscript..jsscript..headerend..body
And then load it into webview using open_raw. And it all works. JS works fine, the CSS looks great and I now have a nice html interface that I can interact with the app :smile:

Hope this helps others. And if there is a simpler way, Id be happy to hear about it.



Oh. if people are interested in the full working project its available here. I havent licensed it yet, but it will be MIT.