什么是iframe?

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。可以理解为把iframe解释成“浏览器中的浏览器“

在IE中：

document.frames[i].document.getElementById('元素的ID');

或：

document.frames['iframe的name'].document.getElementById('元素的ID');

直接上代码：

总共有两个html文件

这上1.html文件，代码如下：

<html>

<head>

<title>这是1.html</title>

<meta charset="UTF-8">

</head>

<body>

<p>这是1.html的内容这是1.html的内容这是1.html的内容这是1.html的内容</p>

<input type="button" onClick="show()" value="提取2.html的内容">

<hr style="color:green;height:1px" />

<div id="ss"></div>

<iframe src="2.html" name="myframe" id="haha" style="display:none"></iframe>

</body>

</html>

<script language="javascript">

function show(){

    var xx=window.frames["myframe"].document.getElementById("bd").innerHTML;

        // 以下通过id来获取也是可以的，同样的效果

    //  var xx=document.getElementById("haha").contentWindow.document.getElementById("bd").innerHTML;

      document.getElementById("ss").innerHTML=xx;

 }

</script>

2.html的代码如下：

<html>

<head>

<title>这是2.html</title>

</head>

<body id="bd">

这是2.html的内容这是2.html的内容这是2.html的内容这是2.html的内容这是2.html的内容这是2.html的内容<br>

这是2.html的内容这是2.html的内容这是2.html的内容这是2.html的内容这是2.html的内容这是2.html的内容<br>

这是2.html的内容这是2.html的内容这是2.html的内容这是2.html的内容这是2.html的内容这是2.html的内容<br>

<input type="button" value="这是2.html的内容"> <br>

</body>

</html>

在safari中的运行结果如我们所愿：

点击按钮后的效果图上：

在goole chrome中就没那么幸运了，无论怎么改都报错检查效果图上：

原因：跨域,file:///类型的也算跨域,chrome对于file协议有安全限制，无法用js访问本地资源，对于http则是好的，所以上面页面要是在iis/apache网站中打开应该是没问题的 。。chrome要发布网站同源的才能互相操作，本地测试操作不了iframe，安全问题，chrome本地也用不了ajax请求本地文件，又有说法是chrome的内核不支持iframe 这个属性。

两个本地(localhost)html文件之间的传值的更多相关文章

  1. Visual Studio 中两个窗体（WinForm）之间相互传值的方法

    编写WinowsForm应用程序时,实现两个窗体之间相互传递值的方法其实很简单.以下用一个例子说明:在名为FormMain主窗体运行过程中利用名为FormInfo窗体,获取用户输入信息,并将这些信息返 ...

  2. php 两个文件之间的相对路径的计算方法

    php 两个文件之间的相对路径的计算方法 比如: 文件A 的路径是 /home/web/lib/img/cache.php 文件B的路径是 /home/web/api/img/show.php 那么. ...

  3. .Net 环境下C# 通过托管C++调用本地C++ Dll文件

     综述 : 本文章介绍.Net 环境下C# 通过托管C++调用本地C++ Dll文件, 示例环境为:VS2010, .Net4.0, Win7. 具体事例为测试C++, C#, 及C#调用本地C++D ...

  4. 微信小程序-02-项目文件之间配合和调用关系

    微信小程序-02-项目文件之间配合和调用关系 我就不说那么多了,我是从官方文档拷贝的,然后加上一些自己的笔记,不喜勿喷 官方文档:https://developers.weixin.qq.com/mi ...

  5. Lsyncd搭建同步镜像-用Lsyncd实现本地和远程服务器之间实时同步

    Lysncd即Live Syncing Daemon,它是开源的数据实时同步工具(后台进程),基于inotify和rsync. lsyncd会密切监测本地服务器上的参照目录,当发现目录下有文件或目录变 ...

  6. comm---两个文件之间的比较

    comm命令可以用于两个文件之间的比较,它有一些选项可以用来调整输出,以便执行交集.求差.以及差集操作. 交集:打印出两个文件所共有的行. 求差:打印出指定文件所包含的且不相同的行. 差集:打印出包含 ...

  7. Linux ln命令：在文件之间建立链接（硬链接和软链接）详解版1

    Linux ln命令:在文件之间建立链接(硬链接和软链接)详解版 < Linux创建文件及修改文件时间戳(touch命令)Linux复制文件和目录(cp命令) > <Linux就该这 ...

  8. JAXB—Java类与XML文件之间转换

    JAXB-Java类与XML文件之间转换 简介         JAXB(Java Architecture for XML Binding) 是一个业界的标准,是一项可以根据XML Schema产生 ...

  9. linux – tty,ttyS,pts,ptmx,vcs,vcsa设备文件之间的区别？(/dev/tty等)

    linux – tty,ttyS,pts,ptmx,vcs,vcsa设备文件之间的区别? 终端有字符终端和图形终端两种模式.在linux的图形环境下,我们可以通过鼠标点击来完成所有的管理任务,这是图形 ...

随机推荐

  1. C#值数值类型转换

    1.十进制转16进制 string result=number.ToString("X2"); >>0A //X2表示大写2位 2.字符串转数值类型 "); ...

  2. cpu中断

    中断是什么?cpu在中断的时候做了些什么? 答:中断就是中止当前正在执行的工作,而去执行引起中断的事件,当引起中断的事件执行完毕之后,CPU继续执行以前的未执行完的工作. CPU暂时中断当前正在执行的 ...

  3. Linux下常用的硬件信息查看命令

    1.查看CPU型号,这里为了方便查看结合管道符用grep进行了匹配,当然只需要前面的命令也可以,命令如下: cat /proc/cpuinfo | grep "model name" ...

  4. Python 之 【markdown 模块的学习】

    摘要: markdown工具,可以将txt转化成html格式.这一类工具的作用是将按一定格式写成的可读性强的文本文件转化为结构化的标准xhtml或html.Linux 下面也有markdown: zh ...

  5. 数组里的数据绑定到dataset中

    string [] an = {"a","b","c"};DataTable dt = new DataTable(); dt.Column ...

  6. [转] Android Volley完全解析(一)，初识Volley的基本用法

    版权声明:本文出自郭霖的博客,转载必须注明出处.   目录(?)[-] Volley简介 下载Volley StringRequest的用法 JsonRequest的用法   转载请注明出处:http ...

  7. zsh 通信脚本

    server #!/bin/zsh #zsh TCP server script zmodload zsh/net/tcp #listening port ztcp -l #This is a fil ...

  8. 用SSH登录局域网中使用网络设置为NAT的虚拟机中的linux

    环境描述: A客户机,安装有putty软件使用SSH方式登录B主机中的虚拟机中的linux:A机的网络地址:192.168.1.2 B主机为Windows7平台,B主机的网络地址为:192.168.1 ...

  9. [Android] 解析android framework下利用app_process来调用java写的命令及示例

    reference to :http://bbs.9ria.com/thread-253058-1-1.html 在android SDK的framework/base/cmds目录下了,有不少目录, ...

  10. Java ANT build.xml

    详情请参考:http://www.cnblogs.com/xionghui/archive/2012/03/13/2393679.html