写一个html代码，把url里的id值写入到iframe的src中。

于 2023-02-15 16:32:00 发布
阅读量349 收藏
点赞数
分类专栏： JS 文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tenny1234/article/details/129046020
版权 
<html>
<head>
  <script>
    function getUrlParams() {
      var params = {};
      var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        params[key] = value;
      });
      return params;
    }

    window.onload = function() {
      var params = getUrlParams();
      if (params.hasOwnProperty("id")) {
        document.getElementById("iframe").src = "https://example.com/?id=" + params["id"];
      }
    }
  </script>
</head>
<body>
  <iframe id="iframe" width="100%" height="500"></iframe>
</body>
</html>

这段代码通过调用 getUrlParams 函数获取 URL 中的参数，并将其写入到 iframe 的 src 中。如果 URL 中没有 id 参数，则不会进行任何操作。

ChenZM：）
关注
专栏目录
网络攻防中黑客常用技术跨站脚本技术：DOM XSS高发场景透视及修复技巧、取值写入页面或动态执行、使用HTML5 postMessage进行跨域通讯、使用存在缺陷的第三方库或通用组件
代码讲故事
03-08 406
网络攻防中黑客常用技术跨站脚本技术：DOM XSS高发场景透视及修复技巧、取值写入页面或动态执行、使用HTML5 postMessage进行跨域通讯、使用存在缺陷的第三方库或通用组件。 DOM-Based XSS是一种基于文档对象模型(Document Object Model,DOM)的Web前端漏洞，简单来说就是JavaScript代码缺陷造成的漏洞。与普通XSS不同的是，DOM XSS是在浏览器的解析中改变页面DOM树，且恶意代码并不在返回页面源码中回显，这使我们无法通过特征匹配来检测DOM XSS
iframe展示html源代码,HTML DOM IFrame用法及代码示例
weixin_39643679的博客
06-07 731
HTML DOM中的IFrame对象属性用于创建和访问对象中的元素。内联框架用于将另一个文档嵌入当前HTML文档中。用法:它用于访问元素。var x = document.getElementById("myframe");它用于创建元素。var x = document.createElement("IFRAME");属性值：align:它用于设置或返回iframe中align属性的值。 HTM...
在iframe中写html代码,HTML中IFRAME标签的使用
weixin_35225144的博客
06-03 2276
一、Iframe标记的使用Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。现在我们谈...
iframe 动态写入html,javascript - 动态创建给定HTML的iframe
weixin_40007175的博客
06-03 2729
javascript - 动态创建给定HTML的iframe我尝试从JavaScript创建iframe并使用任意HTML填充它，如下所示：var html = 'Foo';var iframe = document.createElement('iframe');iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);我希望...
父html将数据传递给子iframe,javascript – 如何通过iframe从父HTML传递参数？
weixin_30047651的博客
06-09 245
在主页上简单地传递参数如下function myFunction(){$('#myIframe').attr('src', "myIframeRequest.html?param1=value1&param2=value2");}在iframe您可以使用脚本从传递到页面的参数获取所需的参数值.function getParamValue(paramName){var url = windo...
html获取url参数 php,获取url中的参数并传递给iframe中报表的方法介绍
weixin_29682291的博客
03-27 331
在使用报表软件时，用户系统左边一般有目录树，点击报表节点就会在右侧网页的iframe中显示出报表，同时点击的时候也会传递一些参数给网页，比如时间和用户信息等。如何使网页中的报表能够获取到传递过来的参数呢？以下用报表软件FineReport简单介绍一些。具体实现过程将报表生成页面时，给网页添加onload事件，首先获取url中的参数，然后嫁接到iframe的src上，或者通过获得的参数拼接处完整的报...
iframe中镶嵌html页，并获取html中的方法
weixin_30341745的博客
11-08 196
首先创建两个html页 第一个html页（HtmlPage1.html） <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> //传值 ...
vue 给iframe设置src_vue项目iframe的传值问题
weixin_39625162的博客
12-19 1806
前言项目需要，我需要引入一个已经封装好的浏览器插件。插件只能以html的方式调用，所以。我把插件的使用封装了一个html页面。vue项目则利用iframe的方式引入。到这里我就遇到了一个问题，那就是vue项目中iframe的传值问题，这里做个笔记防止之后忘记，如果有其他的方式，欢迎大家交流，不胜感激。正文先写几个简易的demo需要用到的html测试damo请使用支持javascript的浏览器12...
同域jQuery(跨)iframe操作DOM(示例代码)
10-26
<input type="button" id="write-aa" value="写入iframe #aa"> ``` 当点击“读取iframe #aa”按钮时，我们使用以下jQuery代码来获取iframe #aa的body内的HTML内容： ```javascript $('#read-aa').click(function()...
JQUERY设置IFRAME的SRC值的代码
10-28
有时候需要设置iframe的src属性，下面是基于jquery的实现代码。
如何把部分html放到另一个html内
最新发布
05-25
3. 使用 JavaScript：使用 JavaScript 代码动态地加载另一个 HTML 文件中的内容，并将其插入到当前 HTML 文件中。例如： ```html <div id="other-html"></div> fetch('path/to/other.html') .then(response => ...
HTML与嵌入的 iframe之间通信
Mr.Striker 的技术博客
10-03 950
HTML与嵌入的 iframe之间通信
html中嵌入iframe进行父子页面参数传递
似水流年
11-27 1705
实现的主要原理是： 1.父页面调用子页面函数，选择iframe的id +contentWindow +子页面的函数名（[参数列表]） 2.子页面调用父页面函数，window.parent.父页面的函数名（[参数列表]） 以下是测试代码： 父页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>父页面<..
iframe url传参
zhaohongx的专栏
04-25 4683
这是我的应用   $.ui.setBackButtonText('返回'); $.ui.setTitle('员工请假登记'); $.ui.toggleNavMenu(); uid=getItem('uid'); dd(); function dd(){  var url = "mobiscroll/c.html?uid="+uid; document.getElemen
JS_html中嵌入iframe进行父子页面参数传递
小歪博客
01-31 792
1.父页面调用子页面函数，选择iframe的id + contentWindow +子页面的函数名（[参数列表]）2.子页面调用父页面函数，window.parent.父页面的函数名（[参数列表]）
iframe、数据库 简易代码
09-15
在这个例子中，我们通过AJAX向服务器请求数据，当请求成功时，将返回的HTML内容写入到id为`myIframe`的iframe中。 总结，iframe是实现网页内容嵌入的工具，而数据库是存储和管理数据的核心。两者在Web开发中经常...
html传值给弹窗,layui 向iframe弹窗传值 子父页相互传值
weixin_31861647的博客
07-14 490
子页调用父页面父页面代码//用来供子页面成功后调用window.success = function(){renderCardData();toastr.success('策略添加成功');};子页面代码$.ajax({type:'post',url:baseUrl + '/abc...',data:JSON.stringify(data),processData: false,contentT...
js获取iframe框架中src所指向的文件的內容 .
字串8的专栏
03-10 3932
获取iframe框架中src所指向的文件的內容 function ini(){  alert(document.getElementById("frame_id").contentWindow.document.body.innerHTML) }
去掉移动端alert和confirm弹出框携带url链接
lib_seek的博客
11-30 3673
去掉移动端alert和confirm弹出框携带url链接
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值