`
shuaigg.babysky
  • 浏览: 571030 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

通过iframe hash 实现跨域

 
阅读更多

<h1>我是A页面</h1>
<iframe name="bpage" frameborder="0" scrolling="no" width="300" height="150" src="http://b.com/kuayu/b/b.html"></iframe>
<script type="text/javascript">
window.crossLoad = function() {
    window.location.reload();
};
window.setBackGroundColor = function(color) {
    if(color){document.body.style.backgroundColor = color};
};
</script>

 

 

测试页面
<div id="colordiv">
    <button action-type="setColor">red</button>
    <button action-type="setColor">green</button>
    <button action-type="setColor">yellow</button>
</div>

<iframe id="testframe" frameborder="0" scrolling="no" width="0" height="0" src="http://a.com/kuayu/a/delegate.html"></iframe>
<script src="http://127.0.0.1/STK/js/gaea_1_19.js"></script>
<script>

var node = STK.E("colordiv");
var testframe = STK.E("testframe");
var delegate = STK.delegatedEvent(node);
delegate.add("setColor" , 'click' , function(spec) {
    var color = spec.el.innerHTML;
    var obj = {
        funcName : "setBackGroundColor",
        args : [color]
    };
    testframe.src = testframe.src.replace(/#[^#]*$/ , "") + "#" + encodeURIComponent(STK.jsonToStr(obj));
});
</script>

 

<script>
window.location.hash = '';
var originHash;
function detectHash() {
    var nowHash = window.location.hash;
    if(nowHash && originHash != nowHash) {
        originHash = nowHash;
        var realHash = eval('(' + decodeURIComponent(nowHash.replace(/^#/ , '')) + ')');
        var funcName = realHash.funcName;
        var args = realHash.args;
        window.top[funcName].apply(window , args);
    }
};
setInterval(detectHash , 500);
</script>

分享到:
评论

相关推荐

    利用location.hash实现跨域iframe自适应

    页面域关系: 主页面a.html所属域A:www.jb51.net 被iframe的页面b.html所属域B:www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b....

    基于iframe实现ajax跨域请求 获取网页中ajax数据

    同时,内嵌的iframe中无法进行跨域通信的,也就是说不同域的iframe是无法互相读取数据的(当然利用hash变化可以从父window传入数据到子iframe,不过并没有什么意义)。iframe跨域通信时,浏览器会报如下错误: 其实这...

    js跨域解决方案

    6. **Window.name与Location.hash**:通过将数据存储在`window.name`属性或URL的hash部分,可以在不同的页面之间传递数据,实现一定程度的跨域。 7. ** CORS-Policy Image**:对于图片资源,可以通过设置图片的`...

    iframe跨域调用父窗口js.zip

    但是,通过特定的技术手段,我们可以实现iframe跨域调用父窗口的JavaScript方法。本教程将详细讲解这一过程。 首先,我们需要了解同源策略。同源策略是浏览器为了保护用户安全而实施的一项机制,它规定只有当两个...

    什么是跨域解决方案有哪些.docx

    通过使用 location.hash,可以实现跨域通信。 四、 window.name + iframe 跨域 通过使用 window.name,可以实现跨域通信。 五、 postMessage 跨域 通过使用 postMessage,可以实现跨域通信。 六、 跨域资源共享...

    跨域解决方案

    3. location.hash + iframe 跨域 4. window.name + iframe 跨域 5. postMessage 跨域 6. 跨域资源共享(CORS) 7. nginx 代理跨域 8. nodejs 中间件代理跨域 9. WebSocket 协议跨域 今天,我们主要讨论 jsonp 跨域...

    IFrame跨域高度自适应实现代码

    通过以上步骤,我们就实现了跨域IFrame的高度自适应。这种方式虽然存在一定的局限性,比如不能兼容所有浏览器,但对大部分现代浏览器来说是可行的。在实际项目中,还需要根据具体的浏览器兼容性和安全性需求进行适当...

    js跨域问题之跨域iframe自适应大小实现代码

    使用上述方法,可以在不违反同源策略的前提下,通过中间代理页面间接获取跨域页面的尺寸信息,并动态调整iframe的尺寸来实现自适应效果。这种方法既保证了安全性,也解决了跨域带来的限制问题。 具体到代码实现,...

    基于iframe的跨域与更新父窗体地址栏的解决方案.docx

    - 当子窗体内部页面发生变化时,可以通过JavaScript获取新的`src`值,并使用`window.history.pushState`或`window.location.hash`更新父窗体的URL。 - 例如: ```javascript function updateUrl() { var iframe...

    js 实现iframe 之间传值

    当`iframe`和父页面位于同一源时,可以通过修改`hash`值来传递简单数据。但是,这种方式不能跨域,且只能传递字符串。 6. HTML5 `window.localStorage`或`sessionStorage`: 如果`iframe`和父页面共享相同的源,...

    前端常见跨域解决方案(全).mht

    1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件代理...

    解决跨域的几种方法.zip

    通过监听IFrame的`hash`变化,可以实现在父页面和IFrame页面间的通信。这种方法适用于需要部分页面跨域的情况。 4. Document.domain 当两个页面都设置相同的`document.domain`时,浏览器会认为它们属于同一个源,...

    前端常见跨域解决方案(全)

    3. `location.hash` + `iframe`:通过改变`iframe`的`location.hash`值,监听`hashchange`事件,可以实现跨域数据传递。 4. `window.name` + `iframe`:`window.name`属性在页面刷新或跳转后仍能保持其值,因此可以...

    iframe跨域通信封装详解

    然而,当需要在一个页面(我们称之为`top`页面)中通过iframe嵌入另一个不同源的页面(我们称之为`iframe`页面)时,如果需要这两个页面之间进行通信,就需要解决跨域问题。本文将详细介绍如何封装一个iframe跨域...

    跨域传值即主页面与iframe之间互相传值

    但通过一些技术手段,开发者可以实现主页面与`iframe`之间的通信,以达到数据共享的目的。本文将详细介绍两种常见的跨域传值方法。 ### 需求一:主页面A向`iframe B`传递数据 #### 实现方式 1. 利用`location.hash...

    javascript iframe跨域详解

    如果两个不同域的页面之间需要通信,可以在其中一个页面中改变iframe的hash值,另一个页面通过监听hash的变化来获取消息。需要注意的是,大部分现代浏览器都会记录hash的改变,这可能会造成历史记录管理上的麻烦,...

    iframe框架与主框架通信模块例子.zip

    在网页开发中,有时我们需要在不同的域之间...通过理解和应用以上知识点,开发者可以有效地实现在iframe和主框架之间的跨域通信,提升网页交互体验。这个模块例子是一个很好的实践,可以帮助开发者深入理解这一技术。

    web跨域提交

    - 利用URL的hash部分在不同域之间传递数据,通过IFrame在目标域读取hash值,再进行数据提交。 - 这种方式同样受到浏览器的限制,可能在某些场景下不可用。 对于GET请求,jQuery的`$.ajax()`函数支持JSONP(JSON ...

    iframe与父页面传值

    对于跨域的`iframe`,可以设置一个中间代理页面,通过这个代理页面实现父子页面间的通信。 三、安全与限制 在进行父子页面通信时,必须注意安全问题。`postMessage`提供了验证`origin`的能力,以防止恶意页面注入...

Global site tag (gtag.js) - Google Analytics