JS中的iframe的src属性和srcdoc

最新推荐文章于 2024-06-01 09:49:42 发布
最新推荐文章于 2024-06-01 09:49:42 发布
阅读量848 收藏 2
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36148463/article/details/130712043
版权
文章描述了在HTML中使用a标签和iframe时遇到的问题，即设置srcdoc后，使用src进行跳转失效。解决方法是检测到srcdoc属性时移除它，以确保src能正常工作。作者最初认为问题可能与event.preventDefault()有关，但经过调试和尝试发现只有移除srcdoc属性才能成功解决这个问题。
摘要由CSDN通过智能技术生成

目录

问题

 解决办法

问题

我在a标签中设置了跳转将内容放到iframe，一个用srcdoc一个用了src，导致src进行跳转的全部失效

 

 解决办法

在使用src的地方，将srcdoc移除，我尝试过设置为空，但是返回的页面也是空，只有移除能生效，反正下次调用的时候又会引用该属性

            if(iframe.srcdoc){
                iframe.removeAttribute('srcdoc');
            }

一直以为是event.preventDefault()的问题，结果弄了一个下午都不是，调试也调试不出啥问题，然后又看到网上说可以改空字符串，结果试了半天也不行，哎，学艺不精的错

丶语
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js HTML ＜iframe＞ srcdoc 属性
weixin_39501680的博客
12-17 1193
HTML srcdoc 属性 <iframe srcdoc="<html><body></body></html>" src="demo_srcdoc.htm"></iframe> 也可只引入一个html片段 <iframe srcdoc="<p>我是一段文本</p>" src="demo_srcdoc121.htm"></iframe> 定义&用法 srcdoc 属性规定要
js 动态修改iframe的src
wujian_csdn_csdn的博客
08-19 2万+
项目组里有功能需要，当前页面获取url传递过来的参数值，动态赋值给iframe的src，从而实现动态加载iframe的需求，代码如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>打印</title> <meta http-equiv="Content-Type" content="text/html; cha
`srcdoc` 模拟实现 - 让旧浏览器拥抱HTML5新特性！
最新发布
gitblog_00093的博客
06-01 329
srcdoc 模拟实现 - 让旧浏览器拥抱HTML5新特性！ 项目地址:https://gitcode.com/jugglinmike/srcdoc-polyfill 在这个快速迭代的Web开发世界中，新特性不断涌现，比如HTML5中的srcdoc属性就是其中之一。它允许开发者在内联方式下指定iframe的内容，使得代码更加简洁、易读。但是，这个特性在早期的浏览器版本中并未得到支持。幸运的是，我们...
js和jquery给iframe src赋值的3种方法
weixin_33895475的博客
01-10 4556
js和jquery给iframe src赋值的3种方法 网页使用iframe嵌入网页时，有时候需要动态处理src的值，而不是写死的，所以我们需要知道如何给iframe src赋值，通常是使用js或jquery来实现。本文介绍js和jquery给iframe src赋值的3种方法。 方法一 这是最常用的js给iframe src赋值的方法，代码如下： <!DO...
js - iframe更改src后，浏览器后退只能后退iframe，不能使父页面后退解决办法
lixinhua_man的博客
05-05 1474
巧用key特性，在虚拟dom的diff算法中，key有着超高的地位，如果同一类型的虚拟节点的key不相同，就会直接销毁重新挂载，而没有key区分时就会尽可能的复用打补丁（patch）。根据这个特性，只需在iframe上增加不同的key即可，本人直接使用的src。找到原因后，第一想法就是直接整个替换iframe，于是单独写了一个renderIframe的方法，每次生成一个新的iframe，然而事与愿违。此时就产生了一个奇怪的现象：点击回退按钮，iframe出现了后退，而父页面没有回退。
html doc src,HTML IFrame srcdoc用法及代码示例
weixin_34379088的博客
06-29 1188
它返回srcdoc属性。iframeObject.srcdoc它用于设置srcdoc属性。iframeObject.srcdoc = HTML_code属性值：HTML_code:它用于指定将在iframe元素中显示的页面的HTML内容。返回值：它返回一个字符串值，该值指定在Iframe元素中显示的页面的HTML内容。范例1：本示例说明了如何返回Iframe srcdoc属性。HTML DOM i...
js给iframe动态设置src和参数参数传递问题
热门推荐
cherishpart的专栏
09-09 5万+
最近开始接触到一个挺老项目，其中涉及到了一些jsp代码编写， 其中遇到一个问题比较麻烦，就是在jsp页面中iframe 的src属性动态修改的问题 页面：hello.jsp，table.jsp 页面上有三个标签：text，button，iframe 实现的功能是：点击button标签，将text标签内容作为src 的请求参数传递给服务端的jsp页面，在hello.jsp中动态显示子窗口表格
ui-iframe:使用`srcdoc`属性的iframe和YouTube视频的用户界面
03-09
以下是一个简单的例子，展示如何使用`srcdoc`属性和YouTube IFrame Player API创建一个自定义播放界面： ```html <iframe id="customPlayer" srcdoc=' <script src=...
IE中document.createElement的iframe无法设置属性name的解决方法
11-24
之前在IE遇到过设置不了iframe的name属性 JavaScript代码 var iframe = document.createElement('iframe'); iframe.name = 'ifr'; //iframe.setAttribute('name', 'ifr'); //这样也不行 上面两种方式都无法设置。...
iframe中页面显示不全1
08-08
首先，我们需要了解`<iframe>`的基本结构和属性。`<iframe>`标签在HTML中是这样定义的： ```html <iframe src="https://example.com" width="500" height="300"></iframe> ``` `src`属性指定要加载的URL，`width`...
js调用iframe实现打印页面内容的方法
12-12
JavaScript调用IFrame实现打印页面内容的方法是一种常见且实用的技术，尤其在网页中需要特定区域打印或者保持原页面不被改变的情况下。以下是该方法的详细解释： ### 1. 程序说明 1. **选择性打印**：此方法允许...
js中iframe调用父页面的方法.docx
01-21
- `iframe`的`srcdoc`属性可以用来动态设置`iframe`的内容，而不是通过`src`属性引用外部URL。 - `sandbox`属性可以开启沙盒模式，限制`iframe`的一些功能，如JavaScript执行、页面导航等。 - `iframe`的`allow`...
4.（前端技术篇js）iframe中src值变化却不跳转
地图之家
10-29 850
听老人家说：多看美女会长寿 原路径oldurl： http://10.254.10.17:37079/bigscreen/index.html#/publish/553d25c3fb1649c493ab8d9e0d52f7b8 跳转路径newurl： http://10.254.10.17:37079/bigscreen/index.html#/publish/927f1efa40d14ceeab7bf8ce28a3fdb1 不可实现frame 跳转的代码编写 var frame = document.g
javascript如何动态修改iframe的src
weixin_30814319的博客
06-22 1071
为什么需要动态修改iframe的src?一般情况我们使用iframe,其中的src通常是写死的，但是有些时候我们不希望它是死的src，而是一个活的src。 示例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="...
使用iframe嵌入页面时，src改变但是页面未刷新
weixin_52443895的博客
11-01 3130
可能有缓存，页面没有重新加载，没有及时刷新。给iframe加key(亲测有效）值已经变化，仅仅是页面未刷新。希望记录的问题能够帮助到你！嵌入显示, 点击修改该。的内容，即页面未刷新。
HTML5学习记录3
weixin_44135991的博客
02-14 660
2.2 HTML增强的iframe HTML5不再推荐在页面中使用框架集，因此HTML5删除了&amp;lt;frameset…/&amp;gt;、&amp;lt;frame…/&amp;gt;和&amp;lt;noframes…/&amp;gt;这3个元素。 HTML5依然保留了一个与框架相关的元素：&amp;lt;iframe…/&amp;gt;元素，该元素可以在普通HTML页面中使用，该元素用于在普通HTML页面中生成一个行内框架，可以直
js动态改变iframe的src属性
weixin_34235457的博客
05-10 1547
今天在Chrome下显示如下的iframe，src设置为空，但打开页面时iframe一直处于刷新状态，看了下面的博文，觉得是不是默认不显示时src应该写成about:blank，明天回去测试下，回来更新结果 写一个<iframe>，src地址为空： <iframe src="" id="ftpTab" name="ftpTab" scrolling="n...
【iframe】iframe修改src的值实现整个页面刷新。
Abubu123的博客
03-28 3万+
在网上找了很久的iframe刷新，几乎都是一样的，也没解决问题。 最后终于试出来了，记录下。 HTML代码: js代码: function sendZch(zch){ $("#map iframe").attr("src", '/bonc_ioc_screen/views/screen/company/jkqMap3.html?zch='+zch); } 只要改变iframe的s
iframe动态设置src
chenbinqq164的专栏
11-20 2074
 因为在后台没有src这个属性，所以应该这样 前台   后台test.Attributes["src"]=http://www.baidu.com
iframe src 携带请求头
06-02
在 HTML 中，我们可以使用 iframe 标签来嵌入其他网页或者文档。通过设置 iframe 的 src 属性，可以指定要加载的网页的 URL。如果需要在请求时携带请求头，可以使用 JavaScript 动态创建 iframe，并在创建时设置请求头。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在 iframe 中携带请求头</title> </head> <body> <iframe id="myIframe" frameborder="0"></iframe> <script> const myIframe = document.getElementById('myIframe'); const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com', true); xhr.setRequestHeader('Authorization', 'Bearer myToken'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { myIframe.srcdoc = xhr.responseText; } }; xhr.send(); </script> </body> </html> ``` 该示例代码中，我们先创建了一个空的 iframe，并使用 JavaScript 创建一个 XMLHttpRequest 对象，发送一个带有请求头的 GET 请求。在请求成功后，使用 iframe 的 srcdoc 属性将返回的 HTML 文本设置为 iframe 的内容。需要注意的是，为了避免跨域问题，我们只能在同一域名下的页面中访问该网页，并且该网页需要允许跨域访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值