Javascript Button Not Working in Chrome

Question

So JS noob here, hoping to get a bit of help. Basically I have this survey on this website. Next to each question on the survey is a little "?" that acts as a help button. When the use clicks on it, that will open a little popup that further explains the question.

This button works in IE 11 but it doesn't seem to work in Chrome. First off here is the javascript code:

<script language="javascript">

var sku_help = new Object();
function config_sku_help(){
    var str = '';
    document.write ('<iframe src="/scores_reports/custom/5252/manual_5252.htm" name="iframe_sku_help" id="iframe_sku_help" width=0 height=0></iframe>');
    document.write('<DIV ID="div_sku_help_win" style="position:absolute; top:10; left:10; border:2px solid black; background-color:#FFFFCC; z-index:10; display:none; padding:10px; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=\'#FFFFCC\', EndColorStr=\'#EEEEBB\')"></DIV>');
} 

config_sku_help();
function render_help_links(){
    if (document.readyState != 'complete'){
        setTimeout('render_help_links()', 1000);
        return;
    }
    var target;
    var tables = document.getElementsByTagName('TABLE');

    for (var i = 0; i < tables.length; i++){
        var table = tables[i];
        var td = table.rows[0].cells[0];
        if (table.id.substring(0, 5) == 'SECT_'){
            target = table.id.replace(/SECT/, 'SID');
            add_help_links(table, target);
        }else{
            for (var j = 0; j < table.rows.length; j++){
                var row = table.rows[j];
                var td = table.rows[j].cells[0];
                if (td.id.substring(0, 4) == 'QID_'){
                    target = td.id;
                    add_help_links(table, target);
                }
            }
        }
    }
}

    function add_help_links(table, target){
        for (var i = 0; i < table.rows.length; i++){
            var cell = table.rows[i].cells[0];
            if (cell.id == target){
                cell.innerHTML = '<a href="javascript:show_sku_help(\'' + target + '\')"><img border=0 src=/images/help.gif></a> ' + cell.innerHTML;        
            }else if (cell.className == 'S_HEAD'){
                cell.innerHTML = '<a href="javascript:show_sku_help(\'' + target + '\')"><img border=0 src=/images/help.gif></a> ' + cell.innerHTML;        
            }
        }
}

function show_sku_help(target){
    var layout_width = 600; //preferred width of help popup
    target = target.toUpperCase();
    sku_help.help_win = document.getElementById('div_sku_help_win');
    var win = sku_help.help_win;
    win.style.width = layout_width;
    win.innerHTML = '';
    win.style.display = 'none';
    var iframe = document.frames['iframe_sku_help'];
    var src_div = iframe.document.getElementById(target);
    get_special_instructions(iframe, target, win);
    win.innerHTML += src_div.innerHTML + '<center><a href="javascript: close_sku_help_win()">close</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript: show_all_sku_manual()">manual</a></center>';
    win.style.left = (document.body.scrollWidth - layout_width) / 2;
    win.style.display = 'inline';
    force_vertical_position(win);
    function force_vertical_position(win){
        for (var i = 1; i < 5; i++){
            win.style.top = document.body.scrollTop + (screen.availHeight / 2) - (win.scrollHeight / 2);
        }
    }
    function get_special_instructions(iframe, target, win){
        if (target.indexOf('Q') < 0){return}// quit if is Domain level help
        divs = iframe.document.getElementsByTagName('DIV');
        for (var i = 0; i < divs.length; i++){
            if (divs[i].id.substring(0, 3) == 'SI_' && divs[i].id.indexOf(target) > -1){
                win.innerHTML += divs[i].innerHTML;
            }
        }
    }
}
function close_sku_help_win(){
    document.getElementById('div_sku_help_win').innerHTML = '';
    document.getElementById('div_sku_help_win').style.display = 'none';
}
function show_all_sku_manual(){
    var manual_win = window.open('/scores_reports/custom/5252/manual_5252.htm', 'sku_manual', 'scrollbars=yes')
    manual_win.focus();
}
setTimeout('render_help_links()', 1000);
</script>

And here for good measure, is an example of one of the help buttons:

<td id="QID_27555">
    <a href="javascript:show_sku_help('QID_27555')">
        <img border="0" src="/images/help.gif"></a> 
<b>1. Number of Prior Adult Felony Convictions</b>
<span class="Req1">*</span>
</td>

Many of you are probably looking at this code and want to pull your hair out. Lot's of our clients are on older versions of IE, so this code hasn't been touched in a couple years.

Now I think the problem has to do with this error the Google Chrome Developer Console has.

Uncaught TypeError: Cannot read property 'iframe_sku_help' of undefined

That then leads us to

var iframe = document.frames['iframe_sku_help'];

that line of code being the one with the error. At this point I'm stuck because I have no idea what this error really means. Any help would be appreciated!

Thanks!

score 0 · Answer 1 · edited May 23 '17 at 12:13

As far as my knowledge goes document.frames is not supported in many modern browsers (it's not part of the current HTML/JS spec).

Try document.getElementsByName instead, as in:

var iframe = document.getElementsByName('iframe_sku_help')[0];

Note that we have to take the zero-index since getElementsByName produces an array of all the elements with the specified name (and since names might not be unique to a single element). It's 0 in this case with the assumption that only there's one element named iframe_sku_help.

However, this might be problematic with earlier versions of IE (see getElementsByName in IE7). Thus I would test whether document.frames exists (as it does in old IE browsers), and if it does not use getElementsByName as a backup:

var iframe;
if (document.frames)
    iframe = document.frames['iframe_sku_help'];
else
    iframe = document.getElementsByName('iframe_sku_help')[0];

I would also be worried about the support for getElementsByName in general. If you find this to be an issue, try using document.getElementsByTagName('iframe') and look through that list instead.

score 0 · Answer 2 · answered Apr 10 '14 at 20:43

As far as I know document.frames will only work in IE.

A cross browser manner to get all the iframes would be giving your iframes names and then using window.frames property. Another option would be creating an array of iframes by using document.getElementsByTagName. Read more about it here.

Javascript Button Not Working in Chrome

2 Answers2