什么是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. 在linux环境编译boost

    1.在boost官网:http://www.boost.org/下载相应版本的boost 2.解压boost到相应目录,在boost跟目录下有b2可执行程序,可以通过输入命令“/b2 --help”, ...

  2. ACM/ICPC 之 数论-斐波拉契●卢卡斯数列(HNNUOJ 11589)

    看到这个标题,貌似很高大上的样子= =,其实这个也是大家熟悉的东西,先给大家科普一下斐波拉契数列. 斐波拉契数列 又称黄金分割数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21.34.… ...

  3. 在wpf中使用winrt的Toast弹框效果

    源码地址:https://code.msdn.microsoft.com/windowsdesktop/Sending-toast-notifications-71e230a2/sourcecode? ...

  4. Divide and conquer:Sumsets(POJ 2549)

    数集 题目大意:给定一些数的集合,要你求出集合中满足a+b+c=d的最大的d(每个数只能用一次) 这题有两种解法, 第一种就是对分,把a+b的和先求出来,然后再枚举d-c,枚举的时候输入按照降序搜索就 ...

  5. php date函数 参数详细

    time()在PHP中是得到一个数字,这个数字表示从1970-01-01到现在共走了多少秒,很奇怪吧 不过这样方便计算, 要找出前一天的时间就是 time()-60*60*24; 要找出前一年的时间就 ...

  6. MongoDB配置文件YAML-based选项全解

    配置文件部分 MongoDB引入一个YAML-based格式的配置文件.2.4版本以前的仍然兼容. 我的mongodb配置文件: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  7. css去掉iPhone、iPad默认按钮样式

    原文链接:http://blog.sina.com.cn/s/blog_7d796c0d0102uyd2.html 只要在样式里面加一句去掉css去掉iPhone.iPad的默认按钮样式就可以了!~ ...

  8. solrconfig.xml和schema.xml说明

    1.   solrconfig.xml solrconfig.xml配置文件主要定义了SOLR的一些处理规则,包括索引数据的存放位置,更新,删除,查询的一些规则配置. 1.1.  datadir节点 ...

  9. Mysql复制语句

    可分为三组(Group):用于Master ,用于Slave,用于任何复制服务.

  10. Android xml text 预览属性

    只在 AS 中生效 xmlns:tools="http://schemas.android.com/tools" tools:text="I am a title&quo ...