iframe的内容未显示（UncaughtType错误）

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. 我使用的是iframe ，而不是使用src来访问其另一页面的内容，而是使用iframe的ID来调用Javascript操作，但未显示任何内容。 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. 左侧的iframe没问题，但是另一端（没有src）为空。 I checked the console and it says Uncaught TypeError: Cannot read property 'contentWindow' of null . 我检查了控制台，并说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 . 发生的是语法错误，因为@content也是HTML 。 The quotation marks are messed up. 引号弄乱了。 Please help me. 请帮我。 Thank you so much. 非常感谢。

Answer 1

Well, you use jQuery is a tag... so I'll use a jQuery :) 好吧，您使用jQuery是一个标记...所以我将使用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/ .append（）： http ： //api.jquery.com/append/

.html() : http://api.jquery.com/html/ .html（）： http : //api.jquery.com/html/

Answer 2

run your javascript when the page is loaded. 页面加载时运行您的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"> @content </div> </div> </div> </div>');
    doc.close(); 
});

iframe的内容未显示（UncaughtType错误）

问题描述

2 个解决方案

解决方案1
0 2014-06-04 01:53:25

解决方案2
0 2014-06-04 02:04:35

iframe的内容未显示（UncaughtType错误）

问题描述

2 个解决方案

解决方案1 0 2014-06-04 01:53:25

解决方案2 0 2014-06-04 02:04:35

解决方案1
0 2014-06-04 01:53:25

解决方案2
0 2014-06-04 02:04:35