/*

 *parent.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>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>这里是parent页面</title>

 <script type="text/javascript">

 window.onload = function (){

     var oTxt = document.getElementById("txt");

     var oBtn = document.getElementById("btn");

     var oI = document.getElementsByTagName("iframe")[0];

     console.log(oI);

     var oW = oI.contentWindow;                        //获取iframe的Window对象

     console.log(oW);

     //debugger;                                                    //这个还不太会用

     var oW2 = oI.contentWindow.document;        //获取iframe的document对象

     console.log(oW2);

     var oDiv = oW.document.getElementById("div1");

     oBtn.onclick = function (){

         if(oTxt.value==""){

             oDiv.innerHTML = oDiv.innerHTML + "<hr>null<br><br>";

         }else{

             oDiv.innerHTML = oTxt.value + "<br><br><br><br>";

         }

     }

 }

 </script>

 </head>

 <body>

 <input type="text" name="txt" id="txt" /> <input type="button" value="确定" id="btn" />

 46541561456

 <br /><hr />

 <iframe src="son.html" frameborder="01" height="270" width="980"></iframe>

 <br /><br /><br /><br /><br />

 45455

 </body>

 </html>
 /*

 *son.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>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>这里是iframe页面</title>

 </head>

 <body>

 <h1>这里是Iframe的东西</h1>

 <div id="div1">789404123<br />f4<br />fff<br /><br /></div>

 145620...0

 </body>

 </html>
  • 在本地会产生跨域问题
  • 解决办法：放在自己安装的环境里运行或跑在服务器上

JS操作网页中的iframe的更多相关文章

  1. js实现网页防止被iframe框架嵌套及几种location.href的区别

    首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下 首先我们了解一下:window.locat ...

  2. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  3. Ifvisible.js – 判断网页中的用户是闲置还是活动状态

    ifvisible.js 是一个跨浏览器.轻量级的方式,用户检查用户在浏览页面或正在与它进行交互.它可以处理活动状态,如在页面上空闲或活跃.您还可以使用 ifvisible.js 智能设置您的间隔,如 ...

  4. prism.js——让网页中的代码更好看

    粗放的代码展示 有时候,网页中会插入代码.直接把代码放入<pre></pre>标签和<code></code>标签里,也算是可以在页面中显示出来. 比如 ...

  5. 使用 pdf.js 在网页中加载 pdf 文件

    在网页中加载并显示PDF文件是最常见的业务需求.例如以下应用场景:(1)在电商网站上购物之后,下载电子发票之前先预览发票.(2)电子商务管理系统中查看发布的公文,公文文件一般是PDF格式的文件. 目前 ...

  6. JS操作未跨域iframe里的DOM

    这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...

  7. js 学习之路5：使用js在网页中添加水印

    示例: <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="te ...

  8. js实现网页中的"运行代码"功能

    <!DOCTYPE html> <html> <head> <meta charset='utf8' /> <title>网页中的运行代码功 ...

  9. js获取网页中宽高度集合

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

随机推荐

  1. 解决ifarme在ios下无法使用

    在第一层的config 添加 <access origin="*" /><allow-navigation href="*" />< ...

  2. 【PAT甲级】1093 Count PAT's (25 分)

    题意: 输入一行由大写字母'P','A','T',组成的字符串,输出一共有多少个三元组"PAT"(相对顺序为PAT即可),答案对1e9+7取模. AAAAAccepted code ...

  3. IDEA 导出可执行jar包【转载】

    1,在项目上鼠标右键 --> Open Module Settings,或者[shift+ctrl+alt+s] 2, Artifacts --> + --> JAR --> ...

  4. python csv 数据切割定制jmeter数据

    需求压测随机抽取10w数据中自定义区间的指定数量数据进行压测: jmeter csv/txt配置: 需要获取{data: [${myList}]  }  jmeter需要数据类型 获取展读取csv数据 ...

  5. WEB - Autoescaping, escaping, escape(转义)

    定义 参考Flask的文档http://flask.pocoo.org/docs/1.0/templating/#controlling-autoescaping 转义就是将> <这些在H ...

  6. Java中引用类型、对象的创建与销毁

    引用类型 在java中,除了基本数据类型之外的,就是引用数据类型了,引用指的是对象的一个引用,通过引用可以操作对象,控制对象,向对象发送消息. 简单来说,引用可以访问对象的属性,并调用对象的方法 创建 ...

  7. 安装完 Ubuntu 16.04.1，重启出现[sda] Assuming drive cache: write through的问题

    重装了一下ubuntu,安装成功后重启出现了这个问题 刚开始以为是重启慢,就没在意这么多,可是我等了半个小时,(我特么的真闲,其实是忙别的忘了),还不行,咦,然后我就去找了找问题,哈哈哈哈 看图说话, ...

  8. iOS 开发之 FMDB 源码分析

    概念: FMDB 是用于数据存储的框架,它是 iOS 平台下对 SQLite 数据库的封装.FMDB 是面向对象的,它以 OC 的方式封装了 SQLite 的 C 语言 API,使用起来更加方便. C ...

  9. 通过aptitude降级包解决依赖问题（E：无法修正错误，因为您要求某些软件包保持现状）

    Linux下的依赖关系令人头疼,尤其是提示如下错误的时候: 下列软件包有未满足的依赖关系: xxx : 依赖: xxx 但是它将不会被安装 E: 无法修正错误,因为您要求某些软件包保持现状,就是它们破 ...

  10. linux命令行大全第四章[通配符的使用]

    通配符示例 1.创建几个文件及目录 补充创建一个以大写字母开头的文件. 2.1显示所有文件及目录 2.2显示所有以1开头的文件及目录 2.3显示以a开头.txt结尾的文件 2.4显示以e开头,后跟任意 ...