两个本地(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的图形环境下,我们可以通过鼠标点击来完成所有的管理任务,这是图形 ...
随机推荐
- Light OJ 1032
数位dp,许多数位dp需要统计某种模式(子串)出现的数量,这种题通常需要在递归参数中加入高位已经出现过的模式的数量. #include <cstdio> #include <cstr ...
- apache的httpd.conf翻译
# This is the main Apache HTTP server configuration file. It contains the 这是Apache HTTP Server的主配置文件 ...
- 解决VM虚拟机MAC OS X 10.10.x的卡顿问题
点此链接下载beamoff安装到虚拟机即可.
- Django~automated tests
def xx(): 冒号下一行要缩进 ATD http://blog.csdn.net/doupei2006/article/details/7657547 http://www.jb51.net/a ...
- ubuntu apc 安装
在ubuntu下安装APC,只需要两条命令,便可将APC和php绑一起. 安装代码: sudo apt-get install -y apache2-prefork-dev ...
- windows下ftp命令大全
FTP Server: home4u.at.china.com User: yepanghuang Password: abc123 打开Windows的开始菜单,执行“运行”命令,在对话框中输入ft ...
- Maven实现直接部署Web项目到Tomcat7(转)
转载自:http://my.oschina.net/angel243/blog/178554 以前在项目中很少使用Maven,最近自己学习了一下maven,真的是非常强大的项目构建工具,对于依赖包的定 ...
- 两个oracle之间建立db link
create database link tobsms connect to bjlt identified by bjlt using '(DESCRIPTION = (ADDRESS_LIST = ...
- andriod一次退出所有的Activity
自己实现了一个Activity管理,可以实现一次退出所有的Activity.在Activity启动的时候,将调用里面的put方法,将Activity对象加入进来.在要退出某个activity的时候,将 ...
- 完美解决:Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=6&arch=x
如题: 原因:没有配置resolv.conf 解决方法: 到/etc目录下配置resolv.conf加入nameserver IP,如: nameserver 8.8.8.8nameserver 8. ...