Loading HTML in a WebView (and the Javascript Sources not Loading Properly) - Swift

Question

I'm currently trying to render sheet music HTML (which I generate with a javascript library) in a webview. Here is my code:

ViewController.swift (partial):

let web = WKWebView()
let localfilePath = NSBundle.mainBundle().URLForResource("index", withExtension: "html")
let myRequest = NSURLRequest(URL: localfilePath!)
web.loadRequest(myRequest)

index.html:

<html>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://www.vexflow.com/support/vexflow-min.js"></script>
<script src="http://www.vexflow.com/support/tabdiv-debug.js"></script>
<body>
    <h1 id="someElement"> Test </h1>
    <div style="width:680; margin-left: auto; margin-right: auto;">
        <div class="vex-tabdiv">
            options width= 700 space=20
            tabstave notation=true key=A time=4/4
            notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 |
            notes :8 t12p7/4 s5s3/4 :8 3s:16:5-7/5 :h p5/4
            text :w, |#segno, ,|, :hd, , #tr
        </div>
    </div>
</body>
</html>

While the HTML does load, it is not correctly rendered. If I render this HTML in Chrome, it will look like this:

Yet, when I try running it within my webview, I get:

As you can see, the HTML is rendered without the JS. I've dug through Google/SO and have tried various things like making the JS files local and importing them as

<script src="lodash.js"></script>

as well as using WKWebView's executeJavascript function to no avail, but I must be missing something.. many thanks in advance!

Huy Nguyễn Quốc · Accepted Answer · 2016-08-18 10:08:16Z

1

The reason probably is js files are loading while your div render. You can save the external js files to local and reference to these local files. It worked for me.

answered Aug 18, 2016 at 10:08

Huy Nguyễn Quốc

112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nico Over a year ago

Hi Huy! As I mentioned at the end of the post, I attempted to save the four files locally and src those instead, yet that yielded the same result. Did you try my code out and it worked for you?

Nico Over a year ago

I actually found two issues with my code and resolved the issue. Thanks again!

Nico · Accepted Answer · 2016-08-18 17:45:30Z

0

I figured out the issue, and it had to do with two main things:

Make the asset files (js, css, etc.) local. There is an issue dealing with CDNs as Huy mentioned
I had an issue with my vexflow set up. The newlines in that div are required and wont work otherwise.
Make sure if you are using vexflow, that you import vexflow-min.js before you import vextab.js

Hopefully this helps someone else in the future! :)

answered Aug 18, 2016 at 17:45

Nico

4092 silver badges15 bronze badges

Collectives™ on Stack Overflow

Loading HTML in a WebView (and the Javascript Sources not Loading Properly) - Swift

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related