两个本地(localhost)html文件之间的传值
什么是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文件之间的传值的更多相关文章
- Visual Studio 中两个窗体(WinForm)之间相互传值的方法
编写WinowsForm应用程序时,实现两个窗体之间相互传递值的方法其实很简单.以下用一个例子说明:在名为FormMain主窗体运行过程中利用名为FormInfo窗体,获取用户输入信息,并将这些信息返 ...
- php 两个文件之间的相对路径的计算方法
php 两个文件之间的相对路径的计算方法 比如: 文件A 的路径是 /home/web/lib/img/cache.php 文件B的路径是 /home/web/api/img/show.php 那么. ...
- .Net 环境下C# 通过托管C++调用本地C++ Dll文件
综述 : 本文章介绍.Net 环境下C# 通过托管C++调用本地C++ Dll文件, 示例环境为:VS2010, .Net4.0, Win7. 具体事例为测试C++, C#, 及C#调用本地C++D ...
- 微信小程序-02-项目文件之间配合和调用关系
微信小程序-02-项目文件之间配合和调用关系 我就不说那么多了,我是从官方文档拷贝的,然后加上一些自己的笔记,不喜勿喷 官方文档:https://developers.weixin.qq.com/mi ...
- Lsyncd搭建同步镜像-用Lsyncd实现本地和远程服务器之间实时同步
Lysncd即Live Syncing Daemon,它是开源的数据实时同步工具(后台进程),基于inotify和rsync. lsyncd会密切监测本地服务器上的参照目录,当发现目录下有文件或目录变 ...
- comm---两个文件之间的比较
comm命令可以用于两个文件之间的比较,它有一些选项可以用来调整输出,以便执行交集.求差.以及差集操作. 交集:打印出两个文件所共有的行. 求差:打印出指定文件所包含的且不相同的行. 差集:打印出包含 ...
- Linux ln命令:在文件之间建立链接(硬链接和软链接)详解版1
Linux ln命令:在文件之间建立链接(硬链接和软链接)详解版 < Linux创建文件及修改文件时间戳(touch命令)Linux复制文件和目录(cp命令) > <Linux就该这 ...
- JAXB—Java类与XML文件之间转换
JAXB-Java类与XML文件之间转换 简介 JAXB(Java Architecture for XML Binding) 是一个业界的标准,是一项可以根据XML Schema产生 ...
- linux – tty,ttyS,pts,ptmx,vcs,vcsa设备文件之间的区别?(/dev/tty等)
linux – tty,ttyS,pts,ptmx,vcs,vcsa设备文件之间的区别? 终端有字符终端和图形终端两种模式.在linux的图形环境下,我们可以通过鼠标点击来完成所有的管理任务,这是图形 ...
随机推荐
- 在linux环境编译boost
1.在boost官网:http://www.boost.org/下载相应版本的boost 2.解压boost到相应目录,在boost跟目录下有b2可执行程序,可以通过输入命令“/b2 --help”, ...
- ACM/ICPC 之 数论-斐波拉契●卢卡斯数列(HNNUOJ 11589)
看到这个标题,貌似很高大上的样子= =,其实这个也是大家熟悉的东西,先给大家科普一下斐波拉契数列. 斐波拉契数列 又称黄金分割数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21.34.… ...
- 在wpf中使用winrt的Toast弹框效果
源码地址:https://code.msdn.microsoft.com/windowsdesktop/Sending-toast-notifications-71e230a2/sourcecode? ...
- Divide and conquer:Sumsets(POJ 2549)
数集 题目大意:给定一些数的集合,要你求出集合中满足a+b+c=d的最大的d(每个数只能用一次) 这题有两种解法, 第一种就是对分,把a+b的和先求出来,然后再枚举d-c,枚举的时候输入按照降序搜索就 ...
- php date函数 参数详细
time()在PHP中是得到一个数字,这个数字表示从1970-01-01到现在共走了多少秒,很奇怪吧 不过这样方便计算, 要找出前一天的时间就是 time()-60*60*24; 要找出前一年的时间就 ...
- MongoDB配置文件YAML-based选项全解
配置文件部分 MongoDB引入一个YAML-based格式的配置文件.2.4版本以前的仍然兼容. 我的mongodb配置文件: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...
- css去掉iPhone、iPad默认按钮样式
原文链接:http://blog.sina.com.cn/s/blog_7d796c0d0102uyd2.html 只要在样式里面加一句去掉css去掉iPhone.iPad的默认按钮样式就可以了!~ ...
- solrconfig.xml和schema.xml说明
1. solrconfig.xml solrconfig.xml配置文件主要定义了SOLR的一些处理规则,包括索引数据的存放位置,更新,删除,查询的一些规则配置. 1.1. datadir节点 ...
- Mysql复制语句
可分为三组(Group):用于Master ,用于Slave,用于任何复制服务.
- Android xml text 预览属性
只在 AS 中生效 xmlns:tools="http://schemas.android.com/tools" tools:text="I am a title&quo ...