iframe打开新页面(iframe页面显示不出来)
大家好，今天给各位分享iframe打开新页面的一些知识，其中也会对iframe页面显示不出来进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
如何用iframe代码显示调用网页的指定部分
以百度主页为例，去掉百度的Logo部分，代码与效果如下：
< html>
< head>
<title>Iframe标签显示目标网页的指定区域，方法1</title>
</head
< body>
< div align="center">
< iframe width="800" height="600" src="" scrolling="no" hspace="-100" vspace="-150"></iframe>
</div></body>
</html>
扩展资料：
Iframe的一些属性：
1、marginheight属性规定框架内容与框架的上方和下方之间的高度，以像素计。
2、maiginweidth属性规定框架内容与框架的左侧和右侧之间的高度，以像素计。
3、vspace y方向显示的区域，负值为从目标网页最上面开始截取的部分，正值为y值+从上部开始内容区域。
4、hsapce x方向显示的区域，负值为从目标网页左侧开始截图的部分，正值为x值+从左侧开始内如区域。
5、src目标网页的地址，可以为html，asp，文本等。
6、frameborder框架边框，0为无边框（画中画效果）。
参考资料来源：百度百科-iframe
Layui 如何在新窗口打开页面
在 Layui中，使用 layer.open方法可以在新窗口中打开页面，通过配置 type和 content参数实现不同类型内容的加载，同时支持自定义窗口样式与交互行为。以下是具体实现方式及关键参数说明：
核心实现方法调用 layer.open(options)，通过配置 options对象中的参数控制新窗口行为。关键参数如下：
type：内容类型，1表示直接加载 HTML字符串或 DOM元素，2表示通过 iframe加载外部 URL。content：新窗口内容，可为 HTML字符串、URL或 DOM元素。area：窗口尺寸，格式为 ['宽度','高度']（如 ['500px','300px']）。title：窗口标题文本。常见场景示例1.通过 iframe加载外部页面layer.open({ type: 2,// iframe类型 content:'外部 URL area: ['800px','600px'],//窗口大小 title:'外部页面示例',//标题 maxmin: true//显示最大化/最小化按钮});效果：打开一个包含指定 URL的 iframe窗口，支持调整尺寸和最大化/最小化操作。
2.加载本地 HTML字符串layer.open({ type: 1,//页面类型 content:'<div style="padding:20px;"><h3>本地内容</h3><p>这是一个通过 HTML字符串加载的窗口。</p></div>', area: ['400px','300px'], title:'本地内容示例', scrollbar: false//隐藏滚动条});效果：直接渲染 HTML字符串到新窗口，适用于动态内容展示。
3.加载 DOM元素//假设页面中存在 id为"demo-dom"的元素var domContent= document.getElementById('demo-dom');layer.open({ type: 1, content: domContent,//直接传入 DOM对象 area: ['500px','400px'], title:'DOM元素示例'});效果：将现有 DOM元素克隆到新窗口中，适用于复用页面内模块。
高级配置选项shade：是否显示遮罩层（默认 true），设置为 false可禁用。shadeClose：点击遮罩层是否关闭窗口（默认 false），启用后用户可通过点击背景关闭。anim：动画类型（默认 0无动画），可选值：1：从右向左滑入
2：从左向右滑入
3：从上到下滑入
4：从下到上滑入
offset：窗口位置偏移，支持字符串（如'100px'）或数组（如 ['100px','50px']分别指定左右/上下偏移）。zIndex：窗口层级（默认 19891014），需确保高于其他元素。success：窗口打开后的回调函数，可用于执行初始化操作：success: function(layero, index){ console.log('窗口已打开，索引为：', index);}end：窗口关闭后的回调函数：end: function(){ console.log('窗口已关闭');}注意事项跨域限制：若通过 iframe加载外部 URL，需确保目标页面允许跨域访问（否则可能被浏览器拦截）。性能优化：加载复杂页面时，建议通过 type: 2的 iframe方式避免阻塞主线程。移动端适配：在移动设备上使用新窗口时，需测试 area和 offset参数的响应式效果。通过灵活组合上述参数，可实现高度定制化的新窗口功能，满足弹层、页面跳转、内容预览等常见需求。
iframe说明与用法
一、记录说明
二、iframe说明
<iframe></iframe>标签用于定义一个页面的内联框架。就是在一个html页面中分出小块，然后用iframe把其他网页嵌入进来，这小块就会显示其他html页面的内容了。
三、iframe标签常用属性
四、父、子页面常用方法
1、父页面
注意：iframe加载也需要时间（相当于重新打开一个页面），需要在父页面操作子页面，要等子页面加载完成，iframe常加上onload事件，jq常加上$('#iframeId').load(function(){});再开始操作子页面。
2、子页面
五、实例
这里也包含了项目中写的常用的公共函数。为了方便js直接嵌入html中。因为jquery很方便，也引入了。
六、替换方法
1、ajax获取页面操作DOM加载。jquery也有提供$('divId').load('.html')直接加载的方法。
2、vue等框架，组件。
关于iframe打开新页面的内容到此结束，希望对大家有所帮助。