控制iframe

我终于会使用iframe了!两个文件example.htmltest.html,控制iframe里的内容:

从父框架控制iframe

//example.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>标题栏</title>

</head>

<body>

    <h1>

        在此窗体中嵌入test.html</h1>

    <iframe src="test.html" id="test" width="250" height="200" scrolling="no" frameborder="1">

    </iframe>

    <input type="button" id="btn1" name="btn1" value="ChangeInnerText..." onclick="javascript:frames('test').window.myH1.innerText='ffff'">

</body>

</html>

 

嵌入的网页:

//test.html

<html>

<body>

    <h1 id="myH1">

        hello,my boy</h1>

</body>

</html>

 

点击按钮后:

 

 

还可以在主框架中取嵌入的页面中数据:

<input type="button" id="btn1" name="btn1"

value="FatchIframeText..." onclick="alert(frames('test').window.myH1.innerText)">

 

 

iframe控制父框架

//example.html

<html>

<body onclick="alert(tt.myH1.innerHTML)">

    <iframe name="tt" src="test.html" width="250" height="200" scrolling="no" frameborder="1">

    </iframe>

    <h1 id="myH2">

        hello,my wife</h1>

    <input type="button" id="btn1" name="btn1" value="button1" onclick="alert(tt.myH1.innerHTML)">

</body>

</html>

 

 

//test.html

<html>

<body>

    <h1 id="myH1">

        hello,my boy</h1>

    <input type="button" id="btn2" name="btn2" value="ChangeParentText" onclick="parent.myH2.innerText='hello,my friend'">

    <input type="button" id="btn3" name="btn3" value="ChangeParentHTML" onclick="parent.myH2.innerHTML='hello,my friend'">

</body>

</html>

 

主框架上的文字改变了。

原文地址:https://www.cnblogs.com/yansc/p/632180.html