html中使用iframe时后面的内容不显示

最新推荐文章于 2023-04-19 03:01:45 发布
最新推荐文章于 2023-04-19 03:01:45 发布
阅读量1.8k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24884885/article/details/105093583
版权

3 月，跳不动了？>>> hot3.png

        在html中使用iframe标签时，发现页面已经嵌入进去了，内容也已经显示了，但iframe后面的内容均不显示。例如：

<html>

<body>

 <iframe src="/i/eg_landscape.jpg"/>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>
这段代码中那些文字就不会显示出来。

        简单看一下好像没有什么问题，但为什么后面的内容不显示呢？经过研究发现是因为<iframe>标签没有写完整。只要把<iframe src="/i/eg_landscape.jpg"/>改成<iframe src="/i/eg_landscape.jpg"></iframe>。就不会有问题了。所以在编写部分标签时注意写完整。

        这种问题可能很小，但在工作中，由于页面布局比较复杂，而且iframe嵌入的内容已经显示出来了，人们往往就不会从这个标签去发现问题。可能以为布局高度等其他原因导致。所以比较难发现。

    总结： 使用<iframe>标签时需要写成对标签<iframe ></iframe>。。而不能写成<irame/>

科比可比克
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
弹出窗口__iframe
04-15
在ie7和ie8中，以及Firefox和Chrome中，可以通过CSS技巧来设置背景页面（即iframe后面的页面）保持固定，不随滚动条滚动。这通常通过设置`position: fixed`和适当的`top`, `right`, `bottom`, `left`值来实现。然而...
【HTML5：超文本标记语言2】
10-30
表单的`action`属性指定提交表单数据的URL，`method`属性规定数据发送到服务器的方式，通常有GET和POST两种，GET将数据附加在URL后面，而POST则将数据隐藏在请求主体中，更安全且支持更大的数据量。 2. **HTML5新增...
html页面用iframe引入公共导航跳转子页面内容不显示或显示不全的问题
Yana5mu的博客
06-04 1566
html页面用iframe引入公共导航跳转子页面内容不显示或显示不全的问题 今天写页面有好几个页面要用一样的导航栏，所以就写了公共的head.html页面。但是发现用jQuery的load方法引入的时候总是报跨域问题，jQuery我是cdn引入的。懒得解决跨域和下载jQuery。便用了iframe引入。发现会出现一个问题，那就是导航栏点击跳转子页面他的页面会放在iframe的盒子里。 这个问题用一行代码就可以解决，给a标签加一个target属性 target="_parent" 看下我的代码 he
html加了一个iframe后，后面的元素都不见了
飞翔的熊blabla
01-27 1501
问题很明显，标签你用错了。的用法是不对的。是个封闭的标签，需要用来结束。所以你只要在后面加上就可以了。
html中使用iframe以后，后面的内容都显示不出来
solarmoons的专栏
03-08 1345
     今天在设计页面的时候，加了个iframe，结果iframe之后所有的内容都显示不出来了。      查了半天才发现没有加上&lt;/iframe&gt;结束标签，真是太郁闷了。...
如果你使用了＜iframe＞但是不显示内容
Treasure Ashes
04-19 1426
iframe内嵌的网页链接复制到浏览器可以看到内容，但是用iframe看不到。你的链接在前面没有加http://。localhost也要加。
vue 解决form表单提交但不跳转页面的问题
10-16
以下是一个示例，展示了如何在Vue中使用`@submit.prevent`来处理表单提交： ```html <!-- 表单内容 --> 姓名"> 邮箱"> 提交 ``` 在上面的代码中，当用户点击提交按钮时，`@submit.prevent="sub"`会调用`sub`...
06_HTML和CSS.pdf
11-26
GET方式将数据附加在URL后面，不安全且数据量有限；POST方式将数据隐藏在请求体中，更安全且可处理大量数据。 表单域标签包括各种输入控件，如`<input>`，它的`type`属性可以设置不同的输入类型，如`text`（文本...
iframe内嵌链接常见问题
一个希望世界和平的前端程序猿的博客
12-26 1万+
iframe内嵌链接常见问题
解决iframe实时获取资源页面显示空白的问题
天界程序员的博客
10-12 1万+
1、问题起源   在使用公司平台开发的时候，内部窗口使用的是iframe，iframe内部的内容是通过定时器一分钟一次获取最新的数据渲染在页面上。   以上看起来是没有什么问题，但是会造成用户体验问题： 当用户打开其他页面后，超过一分钟后，定时器已经调用了一次，但是用户在返回到那个页面，iframe的内容是一个空白的白板。使用F12在浏览器的开发者模式里面，DOM结构里面的innerHtml是有内容的，但是不知道为什么没有显示出来。我也很懵逼！ 2、解决方式 （1）判断用户是否还在平台页面 （2）
iframe框架页面不显示数据 解决方案
qq_43102538的博客
05-21 2081
页面和框架属性有冲突，可能某一个页面定义了全局变量var name；和框架属性有冲突，所以导致不显示数据
iframe不能显示内容的问题
free3people的专栏
02-27 1万+
当你遇到网页中嵌入iframe内容却不能显示的时候，请试下以下的方法 1.iframe格式将src放到最后 2.当你是在代码隐藏页中写src时 先在html中把写上, 然后再代码隐藏页中添加 PlayFrame.Attributes.Add("src", URL地址)属性;
html,添加iframe后，其他div看不见了
禅者，心如止水
12-10 2617
html,添加iframe后，其他div看不见了，原因：没有用,我用了/>....
iframe的基本介绍与使用
热门推荐
qq_45799465的博客
03-31 4万+
一、iframe的基本介绍 二、iframe的基本使用 三、iframe的属性介绍 四、iframe注意事项 五、iframe的URL传参方法 六、iframe的postMessage（）传参方法
html iframe显示不全,滚动的iframe解决，但在iframe页面显示不全
weixin_31064353的博客
06-20 2453
我试图滚动iOS上的iframe，我成功了，它的滚动的好，参考：滚动的iframe解决，但在iframe页面显示不全但是，所有的解决方案都有一个问题：iframe页面没有完全显示...我测试了我的iphone和ipad，iframe页面显示波涛汹涌。 有什么想法吗？例子：$(function(){if (/iPhone|iPod|iPad/.test(navigator.userAgent))$(...
iframe 内页面是自适应的 放到父页面后 显示不全
Karen_Kiss的博客
07-25 1007
下面是在寻找iframe适配方案中找到的别人写的一个方法或许有用但最后没用到，还是贴一下，说不定下次有用呢。这个适配问题折磨了我一天最后发现layui自己生成的iframe居然已经完美解决了这个适配问题。...
html中使用iframe点击左边菜单右边内容切换
最新发布
06-11
在使用iframe实现左边菜单右边内容切换时，我们可以将菜单和内容分别放在一个父级页面(parent)和一个子级页面(child)中，通过在父级页面中添加菜单，然后通过iframe标签嵌入子级页面来实现。以下是一个基本的示例代码： 父级页面(parent)的HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>父级页面</title> <style> .menu { float: left; width: 200px; height: 100%; background-color: #f2f2f2; } iframe { float: left; width: calc(100% - 200px); height: 100%; border: none; } </style> </head> <body> <div class="menu"> <ul> <li><a href="javascript:void(0);" onclick="changeFrameSrc('content1.html')">菜单1</a></li> <li><a href="javascript:void(0);" onclick="changeFrameSrc('content2.html')">菜单2</a></li> <li><a href="javascript:void(0);" onclick="changeFrameSrc('content3.html')">菜单3</a></li> </ul> </div> <iframe id="iframe" src="content1.html"></iframe> <script> function changeFrameSrc(src) { var iframe = document.getElementById('iframe'); iframe.src = src; } </script> </body> </html> ``` 在上面的代码中，我们首先定义了一个菜单和一个iframe标签，通过CSS样式实现左右布局。在菜单中，我们通过a标签的onclick事件来切换iframe的src属性值，从而实现切换内容。 子级页面(content1.html, content2.html, content3.html)的HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子级页面</title> </head> <body> <h1>内容区域1</h1> </body> </html> ``` 在子级页面中，我们只需要编写需要展示的内容即可。当我们在父级页面中点击菜单时，父级页面会切换子级页面的src属性值，从而展示不同的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值