JS中的iframe的src属性和srcdoc

最新推荐文章于 2024-04-28 10:55:39 发布
最新推荐文章于 2024-04-28 10:55:39 发布
阅读量714 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36148463/article/details/130712043
版权

目录

问题

 解决办法

问题

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

 

 解决办法

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

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

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

丶语
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js和jquery给iframe src赋值的3种方法
weixin_33895475的博客
01-10 4354
js和jquery给iframe src赋值的3种方法 网页使用iframe嵌入网页时，有时候需要动态处理src的值，而不是写死的，所以我们需要知道如何给iframe src赋值，通常是使用js或jquery来实现。本文介绍js和jquery给iframe src赋值的3种方法。 方法一 这是最常用的js给iframe src赋值的方法，代码如下： <!DO...
javascript控制frame,iframe的src属性代码
10-29
原理就是通过获取当前网页地址栏的信息传参，然后设置框架的地址。
js改变Iframe中Src的方法
12-09
本文实例讲述了js改变Iframe中Src的方法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <script
php js 改iframe src,js中设置image或者iframe的src
weixin_39620279的博客
03-21 179
原因： 有时候需要使用iframe 标签嵌套一个原始的html来显示页面，比如百度地图！(常常是第三方的框架！在原始的html中实现比较简单)这个时候，如果想外层w页面和里层iframe做数据交互，相互调用js方法！就需要如下实现 解决方案： 一、w页面中如果想访问iframe中的js方法！就需要获取到iframe中的window对象！这个可以上网查，一般获取到iframe节点的dom对象后，通过...
20110107 学习记录：动态指定iframe的scr属性 & IE和Firefox的js兼容性整理 & iframe自适应高度...
weixin_34409741的博客
01-08 302
ie和firefox下都可以通过 1.document.getElementById("abc").src=url; 2.window.frames['name'].document.location.href=url； 的方式来给iframe指定加载的页面值， 但是在火狐下，event.returnValue = false/window.event.returnValue =...
Web前端之iframe详解
weixin_30696427的博客
04-24 250
Web前端之iframe详解 iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。 <iframe src="demo_iframe_sandbox.htm"></iframe> 但是，有追求的我们，并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么属性 ...
iframe使用
Harrietjia的博客
04-26 2020
Theiframetag allows us to embed content coming from other origins (other sites) into our web page. iframe标签允许我们将来自其他来源(其他网站)的内容嵌入到我们的网页中。 Technically, an iframe creates a new nested browsing context. This means that anything in the iframe does not inte..
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
js - iframe更改src后，浏览器后退只能后退iframe，不能使父页面后退解决办法
lixinhua_man的博客
05-05 1290
巧用key特性，在虚拟dom的diff算法中，key有着超高的地位，如果同一类型的虚拟节点的key不相同，就会直接销毁重新挂载，而没有key区分时就会尽可能的复用打补丁（patch）。根据这个特性，只需在iframe上增加不同的key即可，本人直接使用的src。找到原因后，第一想法就是直接整个替换iframe，于是单独写了一个renderIframe的方法，每次生成一个新的iframe，然而事与愿违。此时就产生了一个奇怪的现象：点击回退按钮，iframe出现了后退，而父页面没有回退。
【JS】解决 iframe 中 src 更改页面未刷新问题
qq_45677671的博客
08-21 2122
背景：系统内嵌iframe，iframe 的 src 修改了，但是 iframe 内部页面未更新 原因：iframe 中 src 如果是 hash 路由带 # 的，当 src 改变是不会刷新的
js HTML ＜iframe＞ srcdoc 属性
weixin_39501680的博客
12-17 1094
HTML srcdoc 属性 <iframe srcdoc="<html><body></body></html>" src="demo_srcdoc.htm"></iframe> 也可只引入一个html片段 <iframe srcdoc="<p>我是一段文本</p>" src="demo_srcdoc121.htm"></iframe> 定义&用法 srcdoc 属性规定要
jquery得到iframe src属性值的方法
10-25
主要介绍了jquery得到iframe src属性值的方法，很简单，很实用,需要的朋友可以参考下
js动态改变iframe的src属性
weixin_34235457的博客
05-10 1528
今天在Chrome下显示如下的iframe，src设置为空，但打开页面时iframe一直处于刷新状态，看了下面的博文，觉得是不是默认不显示时src应该写成about:blank，明天回去测试下，回来更新结果 写一个<iframe>，src地址为空： <iframe src="" id="ftpTab" name="ftpTab" scrolling="n...
iframe嵌套页面传值
一只想躺平却不敢躺平的小菜鸟
01-03 1万+
iframe页面嵌套传值
iframe的使用动态添加
wangyingying12的博客
04-17 4886
window.postMessage() 方法可以安全地实现跨源通信。但是一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用window.postMessage结合window.addEventListene这种消息传递技术来实现安全的通信。 标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。在iframe的子页面中需要发出事件，让父页面销毁。在引入iframe的index.html页面。
iframe 页面的使用与动态改变 src 路径
qq_43312337的博客
11-05 9958
iframe 标签定义了包含另外一个文档的内联框架。。意思是说通过其 src 属性，可以把一个页面链接到这个标签内。 该标签是
Web前端笔记（5）
开到荼蘼的博客
03-16 283
发展历史： 1991年八月六日，欧洲核子研究中心的科学家启动了世界上第一个可以访问的网站，从此人类宣布了互联网时代的到来，到2014年确定了HTML5标准. 1994年提出了CSS层叠样式表，知道1996年，CSS才演变成我们熟悉的样子。 HTML标签：1. strong和b标签，em和i标签 <strong>和都是表示强调的<em>标签，表现形态为文本加粗和斜体。...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 653
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
最新发布
励志做最业余的专业博主，控件产品可以私我~
04-28 754
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
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、付费专栏及课程。

余额充值