How to open HTML Files in a Webbrowser

myko

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

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

myko

@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 "<string>", line 1
file_path = urlparse.urljoin('file://', os.path.abspath('base.html'))

SyntaxError: multiple statements found while compiling a single statement

cvp

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

Thank you! It works.

omz

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

@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

This script might help: github

sallyno80

@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

It works perfect. Thank you.

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

cvp

@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

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

@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

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

shinowtf

@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

@shinowtf try

w.present('fullscreen')

shinowtf

@cvp tqqqqqqqq!!!