javascript 能否调用到iframe标签包含页面中的函数

Posted 2023-04-16

例如：
我有两个页面page1，page2
page1中有一个iframe标签，其src引用的是page2；
page2种有一段javascript代码，例如function a()return "abc";
我能在page1种调用到这个a()函数么？

再进一步
a()需要根据page2种一些<input>标签中的值，计算后return一个值
如果我在page1中能调用page2的a()函数，a()函数还是否能正常的获取到原来页面上<input>中的值？

可以的。只要两个页面有一定的关系，无论是通过iframe，还是frameset，甚至是window.open，超链接等等方式，都可以让两个页面之间的js互相调用。注意，是互相调用，也就是说，两者谁都有办法调用另一个的js代码。

当然有前提，前提就是两个页面都是你自己的页面，是在同一个域下面的，否则牵扯跨域问题，就比较麻烦了。

互相调用的关键是获取另一方的window对象。通常页面中window对象就是window，直接使用。但通过某种关系的另一个页面的window就需要通过别的方式获取了。以iframe为例，跨域通过普通节点获取的方式得到iframe节点，比如iframe节点id为ifr，则：

var ifr = document.getElementById('ifr');
var win = ifr.window || ifr.contentWindow; // 考虑兼容性问题

这里获取到的win，就对应普通页面的window。要操作这个框架页面，就可以通过这个win进行操作了。比如获取框架页面的文档对象win.document，到了这一步，剩下的就和普通页面没有区别了。

要获取通过window.open打开的页面的window引用就更简单了：

var win = window.open(url); // 这个函数还有其它知识点，请自行搜索

而要在window.open打开的页面中获取父页面的window，也就是打开该页面的页面的window，也很简单：

var win = window.opener; // 表示打开本window的那个页面的window

获取到另一个页面的window引用后，实际上另一个页面的很多控制权就拿到了。你可以通过获取到的window随意修改另一个页面了。比如要调用iframe中的a函数，就可以这样：

var ifr = document.getElementById('ifr');
var win = ifr.window || ifr.contentWindow;
win.a(); // 调用iframe中的a函数

参考技术A 你可以试试看，如果不跨域的话应该问题不是太大。 参考技术B 是调用不到的！ 参考技术C window.frames[0].execScript "a()";

适用于IE 参考技术D 有的浏览器不支持的，最好不要用这种方法

如何利用iframe标签以及Javascript制作时钟？

如何利用iframe标签以及Javascript制作时钟？

　　如何制作一个时钟呢？效果如下图所示：

这里的时钟会不停的走，但是下面的页面是不会变得，这样就实现了我们想要的效果了。下面我将分为以下几个方面来讲：

1. javascript中的Date引用类型
2. 几种效果不佳的实例
3. <iframe>标签
4. 最终不错的效果实例

如果大家想直接看最终不错的效果实例，可以直接点击这里。

第一部分：Date引用类型

　　1.日期对象可以直接使用new操作符和Date构造函数构造。代码如下：

var date=new Date();

　　

    2. 通过构造函数直接得到的date对象的时间是当前的时间。由于Date类型使用自UTC（Coordinated Universal Time,国际协调时间）1970年1月1日午夜至改日期经过的毫秒数。所以如果直接输出，按道理来说会出现一个很大的数字。但是因为Date引用类型是继承了Object引用类型的，同时也就继承了Object的toString（）方法。故直接输出时，它会默认使用toString（）方法。

var date=new Date;
console.log(date);//  Mon Oct 31 2016 23:29:07 GMT+0800 (中国标准时间)
console.log(date.toString());//Mon Oct 31 2016 23:29:07 GMT+0800 (中国标准时间)

　3.如果我们使用valueOf（）方法（同样也是继承自Object（）引用类型），就可以得到历经的毫秒数了。

var date=new Date();

console.log(date.valueOf());//1477927747916

1477927747916毫秒算下来刚好是46年多。

　4.同时，Date还有一个toLocaleString（）方法，该方法会将毫秒表示的时间转化为当地的字符串表示的时间，如下所示：

var date=new Date();
console.log(date.toLocaleString());//2016/10/31 下午11:29:07

　5.但是如果我们不想使用当前时间而希望使用自定义的时间呢？ Date类型为我们提供了两种方法，分别具有不同的初始化方式。

var time=new Date(Date.parse("October 31,2016"));
console.log(time);//Mon Oct 31 2016 00:00:00 GMT+0800 (中国标准时间)

var Time=new Date("October 31,2016");
console.log(Time);//Mon Oct 31 2016 00:00:00 GMT+0800 (中国标准时间)

var dateTime=new Date(Date.UTC(2016,9,31,23,26,50));
console.log(dateTime);//这是一个bug  Tue Nov 01 2016 07:26:50 GMT+0800 (中国标准时间)

var Timedate=new Date(2016,9,31,23,26,50);
console.log(Timedate);//Mon Oct 31 2016 23:26:50 GMT+0800 (中国标准时间)

　即这两个方法分别是在构造函数时初始化，一个是Date.parse(),如果输入的格式正确，我们甚至省略之。另外一个是Date.UTC,这里传入了六个参数，分别是 年 月 日 时 分 秒 ，同样是可以省略不写。这里值得注意的是：

• “月”是从0开始计算的，即2月但是要输入1,10月要输入9......
• “时”必须使用24小时的方法来计算。

但是这里有一个bug，即当我们使用var dateTime=new Date(Date.UTC(2016,9,31,23,26,50));传入的数字是9，应该得到10月份，却得到了11月份，这时我们可以采用其他方法来替换之。

第二部分：几种效果不佳的实例