Contents of an iframe are not showing (UncaughtType Error)

Question

Good day! I am using iframe and instead of an src to another page for its contents, I used the iframe's id to call a Javascript action but nothing shows. Here is my code:

@(title: Html, nav: String = "")(content: Html)

<!DOCTYPE html>

<html>
    <head>
        <title>Impact Analysis Knowledge Management Tool</title>

        <style>
            .menu {      
                width:25%;
                height:100%;
            }
            .mainContent {
                width:75%;
                height:100%;
            }
        </style>

        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">

        <link href='@routes.Assets.at("stylesheets/css/ui-lightness/jquery-ui-1.10.4.css")' rel="stylesheet">

        <script src='@routes.Assets.at("javascripts/jquery-ui-1.10.4.js")'></script>
        <script type="text/javascript">         
            var doc = document.getElementById('frame').contentWindow.document;
            doc.open();
            doc.write('<div class="container"> <div class="content"> <div class="row"> <div class="span14"> @content </div> </div> </div> </div>');
            doc.close();            
        </script>
    </head>
    <body>

        <div class="topbar">
            <div class="fill">
                <div class="container">
                    <a class="brand" href="@routes.Application.index()">Home</a>
                    <ul class="nav">
                        <li class="@("active".when(nav == "add tag"))">
                            <a href="@routes.Tags.blankForm()">Add Tag</a>
                        </li>
                        <li class="@("active".when(nav == "view edit"))">
                            <a href="@routes.Tags.viewTags()">View/Edit Tag</a>
                        </li>
                        <li class="@("active".when(nav == "log"))">
                            <a href="@routes.Application.logging()">Log Information</a>
                        </li>
                        <li class="@("active".when(nav == "map"))">
                            <a href="@routes.Tags.map(false)">Web Map</a>
                        </li>
                    </ul>
                    <p align="right"> <a href="@routes.Application.logout()">Log-out</a> </p>
                </div>                
            </div>
        </div>

        <iframe class="menu" src="@routes.Tags.map(false)" ></iframe>
        <iframe id="frame" class="mainContent" src="about:blank" ></iframe>    
    </body>
</html>

The left iframe has no problem but the other side (where there is no src) is empty. I checked the console and it says Uncaught TypeError: Cannot read property 'contentWindow' of null. Please help me figure this out. Thanks a lot.

EDIT
This is the page-source.

<link rel="stylesheet" href="/assets/stylesheets/jquery-ui.css">
<script src="/assets/javascripts/jquery-1.10.2.js"></script>
<script src="/assets/javascripts/jquery-ui-1.10.4.js"></script>
<script src='/assets/javascripts/jquery-1.7.1.min.js' type="text/javascript"></script>
<script>

$(function() {
    var availableTags = ["rule 14","rule 15","rule 13","domestic route","block time","working crew","daily schedule","rule 1"]; 

    var scntDiv = $('#addMore');
    var i = $('#addMore p').size();   

    $('#addRT').live('click', function() {
        $('<p>'+
        '<input id="tags'+i+'" type="text" name="relatedTags.tag.name" placeholder="Name" required /> '+
        '<textarea name="relatedTags.relatedNotes" placeholder="Notes"></textarea> '+
        '<select name="relatedTags.relationship"> <option value="parent"> parent </option>'+
                '<option value="child"> child </option>'+
                '<option value="peer"> peer </option>'+
        '</select> '+
        '<a href="#" id="remRT">Remove</a></p>').appendTo(scntDiv);

        $( "#tags"+i ).autocomplete({
          source: availableTags
        });

        i++;

        return false;
    });

    $('#remRT').live('click', function() { 
            if( i > 0 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });

});

function checkDuplicates() {
    if ( $.trim( $('#name').val() ) == '' ) {
        alert('Invalid name.');
        return false;
    }
    else {
        var availableTags = ["rule 14","rule 15","rule 13","domestic route","block time","working crew","daily schedule","rule 1"]; 
        var input = document.getElementById('name').value;
        input = input.replace(/\s+/g,' ').trim().toLowerCase();
        var found = $.inArray(input, availableTags);
        if(found != -1) {
            alert("Tag already exists.");
            return false;
        } else { //does not contain the value
            var k = $('#addMore p').size();   
            for (var i=0; i<k; i++) {
                for (var j=0; j<k; j++) {
                    if (i!=j){
                        if (document.getElementById('tags'+i).value==document.getElementById('tags'+j).value && 
                            document.getElementById('tags'+i).value!="" && document.getElementById('tags'+j).value!="") {
                                alert("Duplicate entries found.");
                                document.getElementById('tags'+i).select();
                                return false;
                        }
                    }
                }
            }
            return true;
        }
    }
}

</script>



<!DOCTYPE html>

<html>
    <head>
        <title>Impact Analysis Knowledge Management Tool</title>

        <style>
            .menu {
              float:left;
              width:20%;
              height:100%;
            }
            .mainContent {
              float:left;
              width:79%;
              height:100%;
            }
        </style>

        <link rel="stylesheet" media="screen" href="/assets/stylesheets/bootstrap.css">
        <link rel="stylesheet" media="screen" href="/assets/stylesheets/main.css">
        <link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">

        <link href='/assets/stylesheets/css/ui-lightness/jquery-ui-1.10.4.css' rel="stylesheet">

        <script src='/assets/javascripts/jquery-ui-1.10.4.js'></script>

    </head>
    <body>

        <div class="topbar">
            <div class="fill">
                <div class="container">
                    <a class="brand" href="/index">Home</a>
                    <ul class="nav">
                        <li class="active">
                            <a href="/addTag">Add Tag</a>
                        </li>
                        <li class="">
                            <a href="/tags/viewTags">View/Edit Tag</a>
                        </li>
                        <li class="">
                            <a href="/logging">Log Information</a>
                        </li>
                        <li class="">
                            <a href="/map?editable=false">Web Map</a>
                        </li>
                    </ul>
                    <p align="right"> <a href="/logout">Log-out</a> </p>
                </div>                
            </div>
        </div>

        <iframe class="menu" src="/map?editable=false" ></iframe>
        <iframe id="frame" class="mainContent" src="about:blank"></iframe>    
        <script type="text/javascript">         
        $(function(){
            var doc = document.getElementById('frame').contentWindow.document;
            doc.open();
            doc.write("<div class='container'> <div class='content'> <div class='row'> <div class='span14'> 
    <p align="right"> Logged in as: <b>user1</b> </p>

    <h1> Add Tag </h1>




<form action="/addTag" method="POST" id="form" onsubmit="return checkDuplicates(this);">


        <fieldset>
            <legend>Add Tag</legend>
















<div class="clearfix  " id="name_field">
    <label for="name">Name</label>
    <div class="input">

    <input type="text" id="name" name="name" value="" >

        <span class="help-inline"></span>
        <span class="help-block">Maximum length: 100, Required</span> 
    </div>
</div>















<div class="clearfix  " id="notes_field">
    <label for="notes">Impact Analysis Notes</label>
    <div class="input">

    <textarea id="notes" name="notes" ></textarea>

        <span class="help-inline"></span>
        <span class="help-block">Maximum length: 200</span> 
    </div>
</div>





        </fieldset>

        <fieldset>
            <legend>Related Tags</legend>

            <div id="profiles">

                 <div id="addMore" class="twipsies well profile">

                 </div>

                <div class="manage">
                    <a class="addProfile btn success" id="addRT">Add related tag</a>
                </div>

            </div>

        </fieldset>

        <div class="actions">
            <input type="submit" class="btn primary" value="Add Tag">
            <a href="/index" class="btn">Cancel</a>
        </div>


</form>


    <script type="text/javascript" charset="utf-8">

        $('.addProfile').live('click', function(e) {
            var template = $('.profile_template')
            template.before('<div class="twipsies well profile">' + template.html() + '</div>')
            renumber()
        })

        $('#form').submit(function() {
            $('.phone_template').remove()
            $('.profile_template').remove()
        })

        var renumber = function(phones) {
            $('.profile').each(function(i) {
                $('input', this).each(function() {
                    $(this).attr('name', $(this).attr('name').replace(/relatedTags\[.+?\]/g, 'relatedTags[' + i + ']'))
                })

            })
        }

    </script>

 </div> </div> </div> </div>');
            doc.close(); 
        });          
        </script>
    </body>
</html>

What happens is a syntax error because the @content is also an HTML. The quotation marks are messed up. Please help me. Thank you so much.

Your script is running before the iframe is available on the page. Move the script to the bottom, before the closing body-tag. — Andy G, Jun 04 '14 at 01:56
Thanks @AndyG. Did that and the items inside `doc.write` doesn't show unless it is a simple `doc.write(' hey ');`. It says `Uncaught SyntaxError: Unexpected token ILLEGAL` in the console. — user3698432, Jun 04 '14 at 02:02
It's preferred that you show the actual rendered HTML code rather than your template source code. Also, `document.write` is frowned upon; try [`document.body.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML). — rvighne, Jun 04 '14 at 02:03
@user3698432: In response to your latest comment, we DEFINITELY need to see the rendered HTML, not your template code. — rvighne, Jun 04 '14 at 02:04
Thanks. I edited my question. What happens is a syntax error because the `@content` is also an HTML. The quotation marks are messed up. — user3698432, Jun 04 '14 at 02:15

faerin · Answer 1 · 2014-06-04T02:02:33.613

0

Well, you use jQuery is a tag... so I'll use a jQuery :)

What about:

$('#frame').contents().find('body').append('<div>your content</div>');

Or:

$('#frame').contents().find('body').html('<div>your content</div>');

Difference between the both examples?

.append(): http://api.jquery.com/append/

.html() : http://api.jquery.com/html/

edited Jun 04 '14 at 02:02

answered Jun 04 '14 at 01:53

faerin

1,915
17
31

Thanks. Did that but it says `Uncaught SyntaxError: Unexpected token ILLEGAL`. – user3698432 Jun 04 '14 at 02:05
Works fine for me.. This post points out your errror: http://stackoverflow.com/questions/12719859/syntaxerror-unexpected-token-illegal – faerin Jun 04 '14 at 02:09
"There is an invisible character in the code, right after the semicolon. It's the Unicode U+200B Zero-width space character (a.k.a. ZWSP, HTML entity ). That character is known to cause the Unexpected token ILLEGAL JavaScript syntax error." [source: http://stackoverflow.com/a/12719860/3293843] – faerin Jun 04 '14 at 02:13
Thanks. I edited my question. I think the error is because the `@content` is also an HTML. The quotation marks are messed up. – user3698432 Jun 04 '14 at 02:16
Makes me curious why you want to add all that content to an iframe, but not making a file of it that you include in the src? – faerin Jun 04 '14 at 02:20
Tried that but I'm having issues with passing an HTML parameter in the routes (Play framework) so I thought this will do. – user3698432 Jun 04 '14 at 02:23

score 0 · Answer 2 · answered Jun 04 '14 at 02:04

0

run your javascript when the page is loaded.

$(function(){
    var doc = document.getElementById('frame').contentWindow.document;
    doc.open();
    doc.write('<div class="container"> <div class="content"> <div class="row"> <div class="span14"> @content </div> </div> </div> </div>');
    doc.close(); 
});

answered Jun 04 '14 at 02:04

gp.

8,074
3
38
39

Thanks. I edited my question. It works because it's in the page source but what happens now is a syntax error because the `@content` is also an HTML. The quotation marks are messed up. – user3698432 Jun 04 '14 at 02:16

Contents of an iframe are not showing (UncaughtType Error)

2 Answers2