Forum Archive

How to open HTML Files in a Webbrowser

myko
Feb 24, 2017 - 08:26

I am a complete beginner. I try to do some examples from a python learning book. One example explains how to build a webapp. The webbapp should search for letters in words, which I should be able to fill in the html form (this example also uses Flask). I wonder if i can do it with pythonista. I created in pythonista a script, html pages and css files. The first problem is that i don't know how to open my html files from pythonista in a webbrowser. I have found out how to open an url or quicklook. Is it any way to open html files in a browser? Thank you!

cvp
Feb 24, 2017 - 08:49
file_path = urlparse.urljoin('file://', os.path.abspath(file_path))
w = ui.WebView()
w.load_url(file_path)
myko
Feb 24, 2017 - 09:01

@cvp Thank you! Where should i enter the name of my file? The name is "base.html". I tried this option with a console, but it didnt function.

file_path = urlparse.urljoin('file://', os.path.abspath('base.html'))
w = ui.WebView()
w.load_url(file_path)

Error message:

File "", line 1
file_path = urlparse.urljoin('file://', os.path.abspath('base.html'))

SyntaxError: multiple statements found while compiling a single statement

cvp
Feb 24, 2017 - 10:00

Try this, it works (with base.html in the same folder as your script)

import ui,os
from urllib.parse import urljoin
file_path = 'base.html'
file_path = urljoin('file://', os.path.abspath(file_path))
w = ui.WebView()
w.load_url(file_path)
w.present()
myko
Feb 24, 2017 - 13:00

Thank you! It works.

omz
Feb 24, 2017 - 18:13

It's actually not necessary to construct a file:// URL yourself, you can simply pass an absolute file path (i.e. os.path.abspath('base.html')) to load_url, and it'll be converted to a URL internally.

Naïvely concatenating 'file://' + path can lead to problems when your path contains spaces etc.

cvp
Feb 24, 2017 - 18:32

@omz I learn every day...
One more time, Thanks for your marvelous application, it has changed my life, really.
I'm retired, I was reading a lot, and now, I almost only use your app.
That's why all my files are now on my iPad, and my Mac is only used as a backup

naturale
Apr 11, 2017 - 16:09

This script might help: github

sallyno80
Nov 20, 2017 - 07:30

@omz
Hello you can u send my a video tutorial how to open pythonista file in google chrome I am a beginner in programming
Thank you

dolanskurd
Aug 18, 2018 - 10:46

It works perfect. Thank you.

Is there any way to use external CSS instead internal styles (in the same folder)?!!

cvp
Aug 18, 2018 - 13:02

@dolanskurd This works but I'm not sure that I correctly understand your question, my fault::
base.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

    <body>

    <h1>Hello</h1>

    </body>

</html>

mystyle.css

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}
dolanskurd
Aug 19, 2018 - 22:01

Thanks for prompt replying.
Yes exactly, I meant as the normal way which we are working with HTML & CSS next to each-other and link the CSS file in the HTML file. I have tested it but couldn’t success to link the CSS file to the HTML.

As folllows:



NOT using styles inside the HTML file.

cvp
Aug 19, 2018 - 22:28

@dolanskurd I don't understand what doesn't work for you.
My little script + Base.html + mystyle.css in the same folder do work.

dolanskurd
Aug 19, 2018 - 22:54

Yesss, I tried it and it works perfect! Thank you.

shinowtf
Aug 23, 2021 - 13:51

@cvp hi dear cvp
Hi i did run the code u send but the output of my html project is not fullsize..which mean all the margin is ruin due to small webview only?any solution to enlarge the webview for whole screen?

cvp
Aug 23, 2021 - 14:03

@shinowtf try

w.present('fullscreen')
shinowtf
Aug 23, 2021 - 16:17

@cvp tqqqqqqqq!!!