`

Html中iframe跨域调用js函数解决办法

    博客分类:
  • HTML
 
阅读更多
页面a.html域名为www.a.com嵌入页面http://www.b.com/b.html,b.html要调用a.html中的js函数,由于两个页面不在一个域中,会提示没权限。如何解决该问题呢,请看下面示例代码。

a.html内容:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>A</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">   
    <script type="text/javascript">
        function test(){
            alert(123);
        }
    </script>
  </head>
  <body>
    主页面 <br>
    <iframe src="http://www.b.com/b.html" width="300" height="300"></iframe>
  </body>
</html>

b.html内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>B</title>
        <script type="text/javascript"> 
            function t(){ 
                var iframeTag = document.getElementById('frameC');
                iframeTag.src = 'http://www.a.html/c.html?time='+new Date();          
            }; 
        </script>
    </head>
    <body>
        被嵌入页面,与主页面不在同一域名下。
        <button onclick="t();">Test</button>
        <iframe id="frameC" style="display: none;"></iframe>
    </body>
</html>

c.html内容(c.html与a.html在同一个域下):
<script type="text/javascript"> 
    top.test(); 
</script> 

通过代码可以很明显的看出,c.html起着关键作用,在两个域之间做为中转站。通过此方法,可以轻松解决iframe下跨域调用js函数的问题。


http://www.jiguu.com/showArticle.action?kindid=f5a9793032dda73b0132e3da96ed0016&id=f5a97930340f7d1d0134179d7e700004
分享到:
评论

相关推荐

    javascript iframe内的函数调用实现方法

    用下面的方法可以调用iframe中的函数,实现一些比较特殊的效果,不过能跨域的。

    jQuery实现跨域iframe接口方法调用

    页面a.html域名为www.a.com嵌入页面http://www.b.com/b.html,b.html要调用a.html中的js函数,由于两个页面不在一个域中,会提示没权限。如何解决该问题呢,请看下面示例代码。

    javascript跨域方法、原理以及出现问题解决方法(详解)

    基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个...

    js实现跨域访问的三种方法

    基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个...

    iframe_height:跨域 iframe 高度调整

    iframe 高度是一个允许跨域消息传递的简单工具,特别是针对响应式设计调整 iframe 高度的大小。 用法 将 parent.js 文件添加到包含页面,将 child.js 添加到包含页面。 在父页面中调用: IframeResize.load(选项);...

    JS解决iframe之间通信和自适应高度的问题

    首先说明下,iframe通信 分为:同域通信 和 跨域通信。...的B.html页面,这两个页面数据进行通信,比如我想在父页面A.html 调用子页面当中的函数 我们很容易想到或者google下 document.getElementById('iframeA').co

    jquery-jsonp.js

     5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的...

    JavaScript两种跨域技术全面介绍

    JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略,在baidu.com下的页面中包含的JavaScript代码,不能访问在google.com域名下的页面内容;甚至不同的子域名之间的页面...

    frame-bridge

    api 支持使用 promise 从桥的远程端返回值,这使得跨域调用函数非常直观。 安装 bower install frame-bridge 用法 在父和子中都包含 api 父母和孩子 &lt; script src =" frame-bridge.min.js " &gt; &lt;/ ...

    IBM WebSphere Portal门户开发笔记01

    48、JS解决COOKIE跨域访问的问题之方法一 323 49、JS禁止复制网页代码 324 50、JS 禁止剪切、复制、粘贴的文本框代码 326 51、如何禁止火狐浏览器的右键功能 327 52、IE地址栏前换成自己的图标 327 53、关闭输入法 ...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    javascript函数的定义 Dom直接选择器 Dom间接选择器 示例之模态对话框 示例之全选和反选以及取消 javascript必须加分号 示例之后台管理左侧菜单 今日内容梳理 本周作业 第16周 上节作业问题答疑 今日内容计划 CSS...

    artDialog_Demo

    2、 剔除鸡肋参数'parent',框架相互调用请用javascript原生方法 3、 剔除对话框关闭后回调函数,如果需要使用请使用内置扩展方法 4、 如果有取消按钮回调函数,那关闭按钮的回调函数也将与其相同 5、 增加当...

    hhConnect:HTML5 PostMessage 库

    用于有效跨域通信的 HTML5 PostMessage 库。 特征 轻的 回拨支持 活动支持 双向通信 基于 JSON-RPC 2.0 标准 两端代码相同 应用程序接口 hhConnect(选项) 初始化与窗口对象的新连接(可以是 iFrame 或弹出窗口)...

    python入门到高级全栈工程师培训 第3期 附课件代码

    08 数学意义的函数与python中的函数 09 为何要有函数 10 函数返回值 11 可变长参数 第15章 01 上节课复习 02 全局变量与局部变量 03 风湿理论之函数即变量 04 函数递归 05 函数递归补充 第16章 01 上节课回顾 02...

    YodPHP 1.4.1.zip

    update:文件通用选择,支持跨域,允许第三方调用;部分服务器获取当前url异常情况兼容处理;tar解压,文件名过长兼容处理(路径大于100字符处理);图片预览大图处理;生成多级缩略图;权限组开启了文件下载权限,对应...

    VeryIDE Bee 互动营销平台 v1.4 UTF-8.rar

    防止多模板的互相冲突 增加 针对"图片轮换"的图片跨域问题的最终解决方案 增加 通行证"用户中心"链接和"积分名称"选项 增加 "消费记录"表,用于存放用户金币消费记录 增加 会员信息表增加"学校名称"字段 增加 "对联...

Global site tag (gtag.js) - Google Analytics