We'll follow our previous examples

Looking at 04 - JavaScript to update a Node.ipynb, we can reuse most of that code to add an IFrame that we can reference later. At this point we do not need to update the IFrame, but it helps to have the scaffolding in place.

At this point we'll just include a static IFrame that points to a fixed URL (https://soasta.github.io/julia-d3-tutorial/d3/06-data-driven-bars.html).

You may need to change this URL to your own if you've cloned the github repository and are working on your own copy.



In [4]:

    
function createIFrame()
    displayid = "demo-iframe-" * string(rand())
    
    display(
        "text/html", 
        """
    <!-- First create an empty iframe that's 500px high and has this id -->
    <iframe
        id="$(displayid)"
        height="500"
        style="border:none;"
        src="about:blank">
    </iframe>


    <!-- Next create a JavaScript function with the same name as the node -->
    <script>
        window["$(displayid)"] = function(url) {
            var iframe = document.getElementById("$(displayid)");
            if(iframe) {
                iframe.width = iframe.parentNode.offsetWidth * 0.99;
                iframe.src = url;
            }
        };
    </script>
        """
    )
    
    return displayid
end









    Out[4]:





createIFrame (generic function with 1 method)

We've done a few things here

We combined most of the code from our previous example into a single display call
We encapsulated it all into a function that we can reuse, and that function returns the displayid that we can use later to update the iframe
We set the iframe's width via JavaScript because our Julia code has no idea how wide the browser window is

We'll also add another function, this one is just a Julia encapsulation of a JavaScript function to change the iframe's URL



In [5]:

    
function updateIFrame(displayid, url)
    display(
        "text/html",
        """<script>window["$(displayid)"]("$(url)");</script>"""
    )
end









    Out[5]:





updateIFrame (generic function with 1 method)

Tying these two together, we can draw and update the iframe



In [8]:

    
id = createIFrame()

updateIFrame(id, "https://soasta.github.io/julia-d3-tutorial/d3/06-data-driven-bars.html")

We can change the URL now

By calling updateIFrame with a new url, we can change what's displayed



In [9]:

    
updateIFrame(id, "https://soasta.github.io/julia-d3-tutorial/d3/05-data-driven-documents.html")



In [ ]: