javascript基础教程第8版---第5章窗口与框架---学习笔记_contentwindow.document.body.innerhtml=newtext-CSDN博客

本文链接：https://blog.csdn.net/bit_7/article/details/49045887

iframe是一种内联框架,可以嵌入到常规HTML页面中的框架,并非必须置于框架集之内,与一般框架一样,iframe可以是一份独立的html文档,可将iframe作为一般脚本的目标,这样可以在脚本控制下,实时创建内容并脱离框架集将其显示在页面中.

用js加载iframe

src iframe页面的url
id js 可以使用这个属性引用iframe
name js也可以使用这个属性引用iframe

实例:
scripts05.html

<!DOCTYPE html>
<html>
<head>
    <title>iframe 4</title>
    <script src="script05.js"></script> 
    <link rel="stylesheet" href="script01.css">
</head>
<body>
    /**/
    <iframe src="iframe01.html" id="icontent" name="icontent"></iframe>
    <h1>Main Content Area</h1>
    <h2>
    <a href="#">Link 1</a><br>
    <a href="#">Link 2</a><br>
    <a href="#">Link 3</a>
    </h2> 
</body>
</html>

scripts05.js

window.onload = initLinks;
var pageCount = new Array(0,0,0);

function initLinks() {
    for (var i=0; i<document.links.length; i++) {
        document.links[i].onclick = writeContent;
        document.links[i].thisPage = i+1;
    }
}

function writeContent() {
    pageCount[this.thisPage]++;

    var newText = "<h1>You are now looking at example " + this.thisPage;
    newText += ".<br>You have been to this page ";
    newText += pageCount[this.thisPage] + " times.<\/h1>";

    document.getElementById("icontent").contentWindow.document.body.innerHTML = newText;
    return false;
}