JavaScript 跳出 iframe 框架

JavaScript 跳出 iframe 框架

作者: 除除 | 来源:发表于2021-11-27 23:02 被阅读0次

JavaScript 跳出 iframe 框架
iframe相关操作
HTML常用标签解析
html的几种常用标签简介
iframe
2021-01-26面试题
HTML基础-09-浮动框架（）和颜色</a></li><li><a href="#r8">PHP从入门到精通，016第二章HTML-HTM的核心标记之内嵌</a></li><li><a href="#r9">iframe标签</a></li><li><a href="#r10">关于iFrame特性总计和iFrame跨域解决办法</a></li></ol></div> <h2>一、window.top</h2> <p>top 属性返回最顶层的先辈窗口。该属性返回对一个顶级窗口的只读引用。如果窗口本身就是一个顶级窗口，top 属性存放对窗口自身的引用。如果窗口是一个框架，那么 top 属性引用包含框架的顶层窗口。</p> <h2>二、window.self</h2> <p>self 属性可返回对窗口自身的只读引用。等价于 Window 属性。</p> <h2>三、window.location</h2> <p>window.location（<a href="https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FLocation" target="_blank">MDN</a>）对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。</p> <h3>3.1 示例</h3> <pre><code>window.location = 'https://blog.mazey.net/547.html'; //网站将跳转到后面的网址 </code></pre> <h3>3.2 属性</h3> <ul> <li>location.hostname 返回 web 主机的域名</li> <li>location.pathname 返回当前页面的路径和文件名</li> <li>location.port 返回 web 主机的端口（80 或 443）</li> <li>location.protocol 返回所使用的 web 协议（http:// 或 https://）</li> </ul> <h3>四、iframe示例</h3> <pre><code><h1>iframe 1</h1> <button type="button" id="self">Show Self</button> <button type="button" id="selflocation">Show Self Location</button> <button type="button" id="selfhref">Show Self Href</button> <button type="button" id="top">Show Top</button> <button type="button" id="toplocation">Show Top Location</button> <button type="button" id="tophref">Show Top Href</button> <button type="button" id="replace">Replace Me To Whole Page</button> <script> document.getElementById('self').addEventListener('click', function(){ alert(window.self); }); document.getElementById('selflocation').addEventListener('click', function(){ alert(window.self.location); }); document.getElementById('selfhref').addEventListener('click', function(){ alert(window.self.location.href); }); document.getElementById('top').addEventListener('click', function(){ alert(window.top); }); document.getElementById('toplocation').addEventListener('click', function(){ alert(window.top.location); }); document.getElementById('tophref').addEventListener('click', function(){ alert(window.top.location.href); }); document.getElementById('replace').addEventListener('click', function(){ if(window.top !== window.self){ window.top.location.href = window.self.location.href; console.log('You replace successfully!'); }else{ console.log('You don\'t need replace, i\'m top!'); } }); </script> </code></pre> <p>五、总结</p> <p>若想页面跳出 iframe 在里面加上下面这段代码即可。</p> <pre><code>if(window.top !== window.self){ //若自身窗口不等于顶层窗口 window.top.location.href = window.self.location.href; //顶层窗口跳转到自身窗口 } </code></pre> <p><strong>版权声明</strong></p> <p>本博客所有的原创文章，作者皆保留版权。转载必须包含本声明，保持本文完整，并以超链接形式注明作者<a href="https://links.jianshu.com/go?to=https%3A%2F%2Fblog.mazey.net%2Fauthor%2Fmazey" target="_blank">后除</a>和本文原始地址：<a href="https://links.jianshu.com/go?to=https%3A%2F%2Fblog.mazey.net%2F547.html" target="_blank">https://blog.mazey.net/547.html</a></p> <p>（完）</p> </div><div class="relateds"><h2>相关文章</h2><ul><li id="r1"><h3><a href="/subject/katcxrtx.html">JavaScript 跳出 iframe 框架</a></h3><p>一、window.top top 属性返回最顶层的先辈窗口。该属性返回对一个顶级窗口的只读引用。如果窗口本身就是一...</p></li><li id="r2"><h3><a href="/subject/bklqsftx.html">iframe相关操作</a></h3><p>1.跳出iframe框架当使用iframe框架时，有时需要跳出整个页面，比如登陆页面，如果不做处理的话会直接内嵌...</p></li><li id="r3"><h3><a href="/subject/nocguftx.html">HTML常用标签解析</a></h3><p>iframe标签 iframe是个内联框架，是在页面里生成个内部框架，可替换标签。格式 <iframe></if...</p></li><li id="r4"><a href="/user/zlcchxtx.html"><img src="https://img.haomeiwen.com/is14239471/8feda849ee3b16c1.png" width="80"></a><h3><a href="/subject/lsoorctx.html">html的几种常用标签简介</a></h3><p>iframe iframe的定义与用法 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 ifr...</p></li><li id="r5"><a href="/user/vqqhjxtx.html"><img src="https://img.haomeiwen.com/ud/6-fd30f34c8641f6f32f5494df5d6b8f3c.jpg" width="80"></a><h3><a href="/subject/dpzllctx.html">iframe</a></h3><p>iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。自适应 iframe 默认情况下，iframe...</p></li><li id="r6"><a href="/user/zgzqhttx.html"><img src="https://img.haomeiwen.com/us2355079/726e3921-c36a-4eed-af0c-5a39397e0ed2.png" width="80"></a><h3><a href="/subject/mmwwzktx.html">2021-01-26面试题</a></h3><p>iframe框架都有哪些优缺点？ iframe 是一种框架,也是一种常用的网页嵌入式 iframe优点 ifra...</p></li><li id="r7"><a href="/user/ylvccftx.html"><img src="https://img.haomeiwen.com/is25672647/7a1cb45ab6976983.png" width="80"></a><h3><a href="/subject/oeltmrtx.html">HTML基础-09-浮动框架（<iframe>）和颜色</a></h3><p>1. 浮动框架 < iframe > 在框架中显示页面代码说明：a 中定义了 target="iframe_a...</p></li><li id="r8"><h3><a href="/subject/ovnaxqtx.html">PHP从入门到精通，016第二章HTML-HTM的核心标记之内嵌</a></h3><p>二、HTML的核心标记（十五）、内嵌框架语法：<iframe>你的浏览器不支持内嵌框架常用...
iframe标签
定义和用法 iframe，HTML标签，作用是创建包含另外一个文档的内联框架（即行内框架）。 iframe 元素也...
关于iFrame特性总计和iFrame跨域解决办法
1、iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 HTML 与 X...

网友评论

本文标题：JavaScript 跳出 iframe 框架

本文链接：https://www.haomeiwen.com/subject/katcxrtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

栏目导航

前端开发笔记

热点阅读

让前端飞

前端开发笔记

关于我们|服务条款|联系我们|JavaScript 跳出 iframe 框架|投稿指南|网站地图|RSS订阅|排版工具|手机版

提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网版权所有

备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！