Iframe content cached somehow and does not update

Dash Python
1

Hello,

I am having difficulties to understand the behavior of what I supposed is caching, but I might be wrong.

I have an Iframe calling a html file statically. When I change the content of the html file, and relaunch the server/browser, the iframe is not updated. It only updates if I change the name of the html file and the corresponding path in the call.
Example:

app.py:

import os
import dash
import flask
from flask import request, Flask, send_from_directory
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
from dash.dependencies import Input, Output, State, Event

# Defining the dash/flask app/server
server = flask.Flask(__name__)
app = dash.Dash(sharing=True, server=server, static_folder='static')


@server.route('/static/<path:path>')
def serve_static(path):
    root_dir = os.getcwd()
    return flask.send_from_directory(os.path.join(root_dir, 'static'), path)

def serve_layout():
    return html.Div([
        html.Iframe(src='static/video.html',
                    style={'width':'800px',
                           'height':'600px',
                           'margin':'auto',
                           'display':'block'},
                    id='video_cont'),
        ])

app.layout = serve_layout

if __name__ == '__main__':
    # To launch in server mode:
    server.run(host='0.0.0.0', debug=True)

video.html:

<!DOCTYPE html>
<head>
</head>
<html>
  <body>
    <video width="100%" height="100%" controls>
      <source src="movie.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </body>
</html>

if I want to add anything in the test.html, ex:

<!DOCTYPE html>
<head>
</head>
<html>
  <body>
    <p> test </p>
    <video width="100%" height="100%" controls>
      <source src="movie.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </body>
</html>

then I need to rename the file into, say, video2.html, and to replace

        html.Iframe(src='static/video.html',

by

        html.Iframe(src='static/video2.html',

in the app.py.

How can I do to have the changes updated directly?
What am I doing wrong here?

Also, really quick question, what’s the convention for style attributes when it is already camel back?
I mean, dashed attributes become camel back (margin-top → marginTop) but what about frameBorder for example? i tried keeping it untouched, but this does not work.

Thanks a lot

2

Hi @Rom1

I would try deleting the cache in your browser. Although I have experienced something similar with .css files, i havent with html files but i suspect this method will work.

3

Thanks for the suggestion.
However, this didn’t work unfortunately.
My cache was actually already empty.

4

I am experiencing the same issue. I found a work around for browser caching with iframe at here https://stackoverflow.com/questions/2648053/preventing-iframe-caching-in-browser. However, I tried add the script using html.Script() to dash app, did not work, added another js file in assets/, did not work. Not sure how to go around it in dash.

5

I found a workaround is to use srcDoc=open(‘yourhtml’, ‘r’).read(). At least it works for me as of now when updating contents in iframe.

6

Having the exact same issue. Using an iframe to load a local html asset (either with xpingli’s suggestion or app.get_asset_url(‘filename.html’) but it still seems to cache and not update properly.

It loaded the correct page when I deleted the cache in Chrome. Any way of disabling that or forcing the Dash app to not cache?

7

I had a similar problem. My solution (or rather workaround) was to have two source .html files and assign the Iframe source interchangeably in callbacks.