{"id":55864,"date":"2022-05-23T03:01:22","date_gmt":"2022-05-22T17:01:22","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55864"},"modified":"2022-05-21T12:08:07","modified_gmt":"2022-05-21T02:08:07","slug":"clone-within-clone-ajax-html-iframe-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/clone-within-clone-ajax-html-iframe-tutorial\/","title":{"rendered":"Clone Within Clone Ajax HTML Iframe Tutorial"},"content":{"rendered":"
\"Clone<\/a>

Clone Within Clone Ajax HTML Iframe Tutorial<\/p><\/div>\n

Can Ajax return you HTML data, if you are okay with an asynchronous call?<\/p>\n

\nGlad you asked. Yes.\n<\/p><\/blockquote>\n

And just such an idea features in our Clone Within Clone<\/i> idea we want to show you as a proof of concept today.<\/p>\n

With this Clone Within Clone<\/i> idea we use an HTML iframe srcdoc<\/a> attribute as the conduit to cloning a webpage HTML into an embedded iframe. And then we offer the user the nine second chance to keep the embedding going by clicking a link in time, to set up a hierarchy of one webpage as the top hierarchy for a hierarchy series of embedded iframe elements.<\/p>\n

The Ajax<\/a> Javascript code which results in HTML output is shown below<\/font> helping populate the relevant HTML iframe srcdoc attribute<\/font> …<\/p>\n


\nvar zhr=null;
\nvar zform=null;
\nvar rawhtml='';<\/font>
\nvar calling=location.search.split('calling=')[1] ? decodeURIComponent(location.search.split('calling=')[1].split('&')[0]) : '' + ('' + document.referrer).replace('undefined','');
\nvar qclick=false;
\nvar countdown=9;
\nvar lh=location.search.split('calling=')[1] ? decodeURIComponent(location.search.split('calling=')[1].split('&')[0]) : '0';
\nlh='' + eval(1 + eval('' + lh));
\nif (calling.indexOf('rjmprogramming.com.au\/ITblog\/clone-within-clone-ajax-html-iframe-tutorial') != -1 && eval('' + lh) == 1) { calling=''; }
\nif (eval('' + lh) > 1 && calling == '') { calling=' '; }
\n
\nfunction stateChanged() {
\n if (zhr.readyState == 4) {
\n if (zhr.status == 200) {
\n rawhtml = zhr.response;<\/font>
\n if (calling == '' || qclick) {
\n document.getElementById('myif').style.display='block';
\n if (rawhtml.indexOf('<span id=\"spancq\">clicked<\/span>') != -1 && rawhtml.indexOf('><\/a>') != -1) {
\n document.getElementById('myif').srcdoc=rawhtml.replace(\" : '0';\", \" : '\" + lh + \"';\").replace('<span id=\"spancq\">clicked<\/span>', '<span id=\"spancq\"><\/span>').replace('><\/a>', '>click here<\/a>');
\n } else {
\n document.getElementById('myif').srcdoc=rawhtml.replace(\" : '0';\", \" : '\" + lh + \"';\");
\n }<\/font>
\n if (calling != '') {
\n var sofarhh=eval(('' + parent.document.getElementById('myif').style.height).replace('px',''));
\n console.log('sofarhh=' + sofarhh);
\n parent.document.getElementById('myif').style.height='' + eval(sofarhh + eval(50 + eval('' + document.getElementsByTagName('div')[0].getBoundingClientRect().height))) + 'px';
\n parent.document.getElementById('myspan').innerHTML='' + lh;
\n }
\n }
\n }
\n }
\n}<\/font>
\n
\nfunction ajaxit() {
\n document.getElementById('acq').innerHTML='';
\n document.getElementById('acq').style.cursor='pointer';
\n document.getElementById('spancq').innerHTML='clicked';
\n countdown=0;
\n document.getElementById('more').innerHTML='';
\n document.getElementById('myif').style.width='' + eval(16 + eval('' + document.getElementsByTagName('h1')[0].getBoundingClientRect().width)) + 'px';
\n document.getElementById('myif').style.height='' + eval(50 + eval('' + document.getElementsByTagName('div')[0].getBoundingClientRect().height)) + 'px';
\n zhr = new XMLHttpRequest();
\n zform = new FormData();<\/font>
\n document.getElementById('myh1').title='This Child level ' + lh;
\n console.log('Child level ' + lh);
\n zform.append('calling', '' + lh);
\n zhr.responseType='Document';
\n zhr.onreadystatechange=stateChanged;
\n zhr.open('get', '.\/ajax_html.html', true);
\n zhr.send(zform);<\/font>
\n}
\n<\/code><\/p>\n

… appearing in ajax_html.html<\/a>‘s web application<\/a> you can also try below (or click here<\/a> if it is sitting there looking at you like a wet lettuce) …<\/p>\n