iframe几种常用代码片段

简介: iframe几种常用代码片段
<iframe
        id="SGframe"
        src="外部文件名.html"
        frameborder="no"
        scrolling="no"
        style="display:block">
</iframe>
<!--全屏iframe设置-->
<iframe
        id="SGframe"
        src="https://720yun.com/t/f33jOzhkOm3?scene_id=3268173"
        frameborder="no"
        scrolling="no"
        width="100%"
        height="100%"
        style="display:block">
</iframe>
<!--
/*全屏样式设置才能让iframe全屏生效*/ 
html, body {
 height: 100%; 
 overflow: hidden; 
 margin: 0; 
 padding: 0; 
 }
-->
/*判断iframe是否加在完毕*/
onload = function () {
    let iframe = document.createElement("iframe");
    iframe.id = "ID名";
    iframe.src = "外部文件名.html";
    if (iframe.attachEvent) {
        iframe.attachEvent("onload", function () {
            //加载完毕
        });
    } else {
        iframe.onload = function () {
            //加载完毕
        };
    }
    document.body.appendChild(iframe);
};
/*判断当前页面没有被嵌入iframe就跳转到对应的首页*/ 
top.location === location && alert('被嵌入到了其他网页');


相关文章
|
3月前
|
前端开发 Java Maven
iframe的简单使用
这篇文章通过一个简单的Maven项目示例,演示了如何使用`iframe`标签进行页面跳转和局部数据刷新,以及`a`标签的`target`属性与`iframe`的`name`属性如何配合使用来实现链接在`iframe`中的加载。
iframe的简单使用
|
5月前
|
JavaScript 前端开发 API
快速实现 iframe 嵌套页面
【6月更文挑战第22天】快速实现 iframe 嵌套页面
|
JavaScript 前端开发
js内联外联样式的获取,父页面获取iframe框架元素返回null
js内联外联样式的获取,父页面获取iframe框架元素返回null
|
JavaScript 前端开发
在查看源代码中隐藏 JavaScript 代码
在查看源代码中隐藏 JavaScript 代码
161 0
|
JavaScript 前端开发 数据可视化
浏览器原理 05 # 渲染流程:HTML、CSS和JavaScript,是如何变成页面的?2
浏览器原理 05 # 渲染流程:HTML、CSS和JavaScript,是如何变成页面的?
240 0
浏览器原理 05 # 渲染流程:HTML、CSS和JavaScript,是如何变成页面的?2
|
Web App开发 JavaScript 前端开发
浏览器原理 05 # 渲染流程:HTML、CSS和JavaScript,是如何变成页面的?
浏览器原理 05 # 渲染流程:HTML、CSS和JavaScript,是如何变成页面的?
181 0
浏览器原理 05 # 渲染流程:HTML、CSS和JavaScript,是如何变成页面的?
|
Web App开发 JavaScript 前端开发
iframe调用父页面javascript函数的方法
1、iframe子页面调用 父页面js方法 子页面调用父页面函数只需要写上window.parent就可以了。比如调用a()函数,就写成: window.parent.a();   2、父页面调用iframe 子页面js方法 这个就稍微复杂一些,下面的方法支持ie和firefox浏览器: document.
3372 0
|
移动开发 Java HTML5
HTML5 学习10.iframe内联框架
HTML5 学习10.iframe内联框架