How to wait for webpage to finish its work before showing it in an iframe on another web-page

Question

I have a web-page which contains an IFrame. In that iframe, I am supposed to display a graph rendered from the data collected. The rendering is done by a JavaScript file and then a web-page in loaded. Now, the problem is that the rendering can take some time to finish if input data to JS file is large. Now, when I use the main web-page for to display the graph in an iframe then it shows me the old web-page (not the new one which is developed by JS file with new data).

//This is the body of web-page to be displayed in the iframe. The last script added here renders the data to display graph
<body>
    <div id="graph">
    </div>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
    <script src="https://unpkg.com/d3-graphviz@1.3.1/build/d3-graphviz.min.js"></script>
<!--    <script src="./renderer.js"></script> -->
    <script src="http://127.0.0.1:3000/renderer.js"></script> 
</body>

//This is the iframe in which the above page is to be displayed
<iframe id='svg_frame' src="http://127.0.0.1:3000/render.html">
</iframe>

EDIT --- Here is the JS file used for rendering:

var testStringShort="d78097e9b6812ac3d37bf34f06d230c7|Jenny||teaches||Samir|\nc2a399e13af9dbadc41b7b967a1deb95|Jenny||teaches||Swadesh|\nda14b3e11e7621846e493db4bea4ae64|Jenny||teaches||Sargun|\nd18032aa6345478915e0aaaee95cd5f2|Jenny||teaches||Sahil|\nd8c015ebdc812f0ad36cd18a5536d317|Jenny||teaches||Kavya|\n70fd4bc59f00f8931818a11e719d8872|Jenny||teaches||Shalvi|"
var NODE_COLOR='#fd153c'
var graphviz = d3.select("#graph")
    .graphviz()
    .logEvents(true)
    .on("initEnd", render);

var n_nodes=0,n_edges=0;

function render(filename) {
    graphviz
    var dot=getDOTfromGDF(filename);
    console.log('DOT OBTAINED')
    graphviz
        .renderDot(dot);
}
function getLabel(string)
{
    if(string.indexOf('/')==-1)return string;
    return string.split('/').pop()
}
function randomColor()
{
    return '#'+(Math.random()*0xFFFFFF<<0).toString(16);
}
function randomColorString(string)
{
    var hash = 0, i, chr;
    if (string.length === 0) return hash;
    for (i = 0; i < string.length; i++) {
        chr   = string.charCodeAt(i);
        hash  = ((hash << 5) - hash) + chr;
        hash |= 0; // Convert to 32bit integer
    }
    hash = hash & 0xFFFFFF;
    return '#'+hash.toString(16);
}
//DOT documentation: https://www.graphviz.org/doc/info/attrs.html#d:center
function getDOTfromGDF(filename) {
    //read file
    var dotArray=[]
    dotArray.push('digraph G {')
    dotArray.push('node [style="filled"];')
    dotArray.push('size = "16.66,8.33!";') // 1200x600 at 72px/in, "!" to force
    dotArray.push('ratio = "fill";')
    dotArray.push('center = "true";')
    dotArray.push('bgcolor="#64F0F0";')
    /*const fs = require('fs') 
    fs.readFile(filename, 'ascii', (err, data) => { 
        if (err) throw err; 
        var lines=data.toString().split("\n") 
        console.log(lines)
    })*/
    var lines=testStringShort.toString().split("\n")
    var nodes=[]
    var edge_description=[]
    for (var i = 0; i < lines.length; ++i) {
          lines[i] = lines[i].trim()
          var words=lines[i].split('|')
          //Add node to nodes if not already added along with label
          nodes.push(getLabel(words[1]));
          //nodes.push(getLabel(words[3]));
          nodes.push(getLabel(words[5]));
          //Add edge_description
          var label=getLabel(words[3])
          var QUERY_URL='/../?type=Search&Subject=?&Predicate='+label+'&ObjecT=?&shapes=svg'
          edge_description.push(getLabel(words[1])+' -> '+getLabel(words[5])+'['+'label="'+getLabel(words[3])+'", color="'+randomColorString(getLabel(words[1]))+'", URL="'+QUERY_URL+'", target= "_parent"];')
          n_edges++;
       }
    new Set(nodes).forEach(function(value1,value2,set){
        var label=getLabel(value1)
        n_nodes++;
        var QUERY_URL='/../?type=Search&Subject='+label+'&Predicate=?&ObjecT=?&shapes=svg'
        dotArray.push(label+' [ '+'label="'+label+'", fillcolor="'+randomColor()+'", URL="'+QUERY_URL+'", target= "_parent"];')
    })
    dotArray=dotArray.concat(edge_description);
    dotArray.push('}')
    console.log(n_nodes) 
    console.log(n_edges)
    var dot = dotArray.join('');
    return dot
}

I want the whole graph to be rendered by the javascript and then displayed in the iframe.

Answer 1

Try this:

<iframe id="svg_frame" style="display:none;" src="http://127.0.0.1:3000/render.html">
</iframe>

....


var graphviz = d3.select("#graph")
    .graphviz()
    .logEvents(true)
    .on("initEnd",render)
    .on("end",showIframe);

function showIframe(){
   window.parent.document.getElementById('svg_frame').style.display = "block";
}

Answer 2

I figured out that the problem is not in the rendering JS file. The nodejs server that I coded, was actually picking the old file instead of waiting for my bash script to generate my new file. Hence closing the question.

How to wait for webpage to finish its work before showing it in an iframe on another web-page

Question

2 answers

solution1
0 2019-07-05 13:30:49

solution2
0 ACCPTED 2019-07-06 13:47:16

How to wait for webpage to finish its work before showing it in an iframe on another web-page

Question

2 answers

solution1 0 2019-07-05 13:30:49

solution2 0 ACCPTED 2019-07-06 13:47:16

solution1
0 2019-07-05 13:30:49

solution2
0 ACCPTED 2019-07-06 13:47:16