{"id":17020,"date":"2015-09-08T05:01:04","date_gmt":"2015-09-07T19:01:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17020"},"modified":"2015-09-07T06:19:35","modified_gmt":"2015-09-06T20:19:35","slug":"javascript-dom-big-changes-iframe-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-dom-big-changes-iframe-tutorial\/","title":{"rendered":"Javascript DOM Big Changes Iframe Tutorial"},"content":{"rendered":"
\"Javascript<\/a>

Javascript DOM Big Changes Iframe Tutorial<\/p><\/div>\n

The “onion of the 4th dimension”<\/a> contribution today, to yesterday’s Javascript DOM Big Changes Primer Tutorial<\/a> as shown below, revolves around the Sun<\/strike> … doh! … revolves around the relationship between child (HTML iframe<\/a> element) and parent webpage regarding the use of document.body.innerHTML<\/a> HTML DOM property.<\/p>\n

Within the same domain, remembering that not everything is available to send to an HTML iframe element, always, such child and parent relationships can be set up to have quite powerful functionality, given that the child and parent can see and refer to each other.<\/p>\n

    \n
  1. parent seeing and referring to child … via yf.body.innerHTML<\/i> as per the parent onload event logic (for a child in an HTML iframe as per <iframe id=’myiframe’ style=’width:100%; height:800px;’ frameborder=0 src=’change_everything.html’ title=’Changing the Look Big Time’><\/iframe><\/i>) …
    \n
    \nvar xf=null;
    \nvar yf=null;
    \nfunction connect_to_iframe() {
    \n xf = document.getElementById(\"myiframe\");
    \n yf = (xf.contentWindow || xf.contentDocument);
    \n if (yf.document) { yf = yf.document; }
    \n}
    \n<\/code>\n<\/li>\n
  2. child seeing and referring to parent … via top.document.body.innerHTML<\/i> or parent.document.body.innerHTML<\/i><\/li>\n<\/ol>\n

    So, the other thing about this child (iframe) and parent webpage relationship is that Javascript client work can perform some of those tasks that you may have compartmentalized in your mind as being in the precinct of only serverside languages such as PHP or ASP.Net, so, for this reason alone, it can be good to allow such techniques into your mind of proposed solutions for some web application issues you are finding solutions for.<\/p>\n

    Perhaps you can get the gist of what we are talking about by trying a live run<\/a> to get the context of how the HTML and Javascript programming source code you could call supervise_change_everything.html<\/a> works. It got to be created by working on yesterday’s change_everything.html<\/a> as its basis, and you can see how this might have come to pass by perusing this link<\/a>.<\/p>\n

    Don’t know about you, but the use of HTML iframe elements has a great appeal, as well as a feeling that when using them, you are modularizing your solution in some way.<\/p>\n

    \n

    Previous relevant Javascript DOM Big Changes Primer Tutorial<\/a> is shown below.<\/p>\n

    \"Javascript<\/a>

    Javascript DOM Big Changes Primer Tutorial<\/p><\/div>\n

    Hope you’ve been seeing the joys of web application programming using Javascript client logic regarding HTML DOM innerHTML property<\/a> over the last couple of days. It occurs to us that we, perhaps, should step back a bit and go over some “refresh” feel issues to this work, where you need to consider important dynamic choices the user has made on your webpage ahead of the “refresh” feel you make happen, and cater for that, as necessary. The bottom line is, these techniques add dynamic aspects to your Javascript DOM client work.<\/p>\n

    Javascript DOM<\/a> is very useful, and tend to think of it normally as a localised modifier of the look of web elements, but the use of its document.body.innerHTML<\/a><\/i> along with a regex<\/a> usage of Javascript’s replace<\/i><\/a> function can be combined to change things up considerably.<\/p>\n

    This came to mind, and got implemented, with our Morse Code tutorial<\/a> the other day, when multiple select tags using the onclick event don’t work so well with mobile devices.<\/p>\n

    Here, today, we allow the toggling of …<\/p>\n