解决js获取到指定的iframe以实现刷新的效果

最新推荐文章于 2022-09-08 10:51:15 发布
最新推荐文章于 2022-09-08 10:51:15 发布
阅读量916 收藏
点赞数
分类专栏： js获取指定iframe 文章标签： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xwyjw/article/details/120349582
版权

先说一下自己的踩坑经历吧
1.首先要想获取到自己需要的iframe，我们必须需要知道咱们的页面结构，然后才能进行下一步去获取咱 们需要的iframe，一般情况下咱们是通过iframe的name或id对他进行匹配。
2.由于我的项目是多层嵌套，再加上自己前期一直想刷新而不是先去了解页面结构导致自己做了好多无用功
3.当咱们需要去寻找子页面里的iframe时首先要找到父页面的iframe
下面说一下我的解决思路是什么吧
①我在咱们打开页面时给他传一个id方便咱们进行寻找父级的iframe
在这里插入图片描述
然后在页面右击检查我们就会看到咱们赋值的id
在这里插入图片描述
②咱们去获取到他下面的iframe
在这里插入图片描述
也就是图片中的第一句话是获取到他的iframe的id
然后第二句话就是咱们执行咱们需要刷新的页面的自带的location.reload()方法
在这里插入图片描述
这个就是我最后需要的那个iframe的name值或者id值
最后效果就实现了 如果文中那有问题请大佬指出或有什么更好的方法指出

xwyjw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js获取iframe中的内容
12-08
js获取iframe中的内容
js实现刷新iframe的方法汇总
10-24
此时，可以在内容IFrame的提交JS中利用`parent`对象来访问父页面，并刷新指定的IFrame。例如： ```javascript document.frames("refreshAlarm").location.reload(true); document.frames("refreshAlarm").document....
js强制刷新某个iframe
jcmcom的博客
04-10 1889
js中对这个iframe使用：(myIframe为要刷新的iframe的id) $('#myIframe').attr('src', $('#myIframe').attr('src'));
弹框获取iframe的值或者调用js方法
qq_45782349的博客
03-07 680
获取iframe内的元素值&js方法 最近遇到一个问题，就是嵌套在Iframe页面，添加或者修改值是通过弹框来操作的，而这个弹框又是一个独立的页面，所以在获取主页面的元素或者js方法时，浏览器控制台就会报错，找不到这个方法或者元素，然后参考了很多解决方法，最终是找到了这两个，直接获取到了值和方法~ 获取iframe框内的元素值 document.getElementById('info').contentWindow.document.getElementById("sclx").value
【VUE】获取iframe中的img元素，并设置宽高
IU
08-13 2874
iframe <iframe id="preview" @load="deliverToken" :src="imgrc" frameborder="0"></iframe> js deliverToken(obj) { this.$nextTick(() => { let obj = document.getElementById('preview').contentWindow obj.document.getElementsB
JS中获取和操作iframe
weixin_30435261的博客
12-16 156
一、需求与遇到的问题 　　在网站的后台管理中使用了iframe框架布局，包括顶部菜单、左侧导航和主页面。需求是：点击主页面上的一个按钮，在顶部菜单栏的右侧显示“退出”链接，点击可退出系统。 　　我的思路是：在顶部的菜单页面放一个不可见的“退出”链接，当用户点击位于iframe中的主页面（mainPage.htm）中的按钮时，在顶部菜单页面的右侧显示“退出”。 　　我现在遇到的问题是：如何在页...
js利用iframe实现选项卡效果
10-14
本文将深入探讨如何使用JavaScript和IFrame来实现这种效果。 首先，我们来了解一下JavaScript（简称JS）的基本概念。JavaScript是一种轻量级的解释型编程语言，主要用于网页和网络应用开发。它可以对用户的交互进行...
基于iframe实现类似于ajax的页面无刷新
09-04
这时，我们可以利用`iframe`来实现类似Ajax的效果，即基于iframe的页面无刷新提交。 `iframe`（Inline Frame）是HTML中的一个元素，用于在当前文档中嵌入另一个文档。通过设置`iframe`的`name`属性，我们可以将表单...
iframe实现Ajax文件上传效果示例
10-26
在Web开发中，文件上传是一项常见的功能，Ajax技术可以实现异步无刷新的上传体验，而结合iframe，我们可以实现一种不离开当前页面的文件上传方式。这篇文章将详细讲解如何使用iframe来实现Ajax文件上传的效果。 ...
js实现网页防止被iframe框架嵌套及几种location.href的区别
10-26
- `<form>`：默认情况下，表单提交后，当前页面会被刷新或跳转到指定URL。 - `<form target="_blank">`：表单提交后会在新窗口打开结果页面。 - `<form target="_parent">`：如果表单在`iframe`中，提交后会刷新包含...
javascript~获取当前iframe的id和修改iframe属性
路漫漫其修远兮
04-19 4077
获取：var id = self.frameElement.getAttribute(‘id’)； 修改：(’#’+id+’’,window.parent.document).attr(‘id’,’’); 引用：https://blog.csdn.net/qq_37204361/article/details/83996198 ...
原生js实现获取iframe标签中的document
qq_43332570的博客
07-04 3633
需求：在父容器中获取页面中iframe标签中的div元素并改变样式 效果图如下： 实现代码 其实实现起来也特别的简单，只不过要注意等页面加载完成在去找iframe中的元素才能找到，完整代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
Js之获取iframe中的元素
weixin_45346457的博客
06-02 1454
iframe
JS刷新Iframe，跨域
monkey's的博客
05-30 1379
需求 项目中会有刷新iframe的需求， 方法 一般情况下，我们直接用iframe的==location.reload(true)==方法就可以了，它的缺点是，如果是刷新外部的URL(不同源的)，那么这种方法会报跨域的错误。 Blocked a frame with origin xxxx from accessing a cross-origin frame. 这个时候我们需要用另外一种方法window.open()看例子: <iframe :src="qrcodePath" name="r
Js-调用iframe页面方法
qq_26318597的博客
09-08 2594
js 调用iframe页面 方法
使用js/jquery查找iframe中的
weixin_30561177的博客
07-12 95
原生js 一、在iframe的父窗口中获取iframe中的元素： js代码 格式： window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").onclick = function(){}; 实例：window.frames["ifm"].document.getElementById("bt...
js获取iframe对象
热门推荐
smile的专栏
11-22 1万+
搜索资料获取iframe对象可以这样写document.frames("iframeId").document;或 window.frames['iframeId'].document注：注意：window.frames只可写成window.frames[‘iframeId’]不能写成window.frames(‘iframeId’) 但是在IE环境下测试会报Uncaught TypeError:
puppeteer获取指定的iframe
最新发布
09-19
使用puppeteer获取指定的iframe可以通过以下步骤实现： 1. 使用puppeteer的`launch`函数启动一个浏览器实例。 2. 使用`newPage`方法创建一个新的页面。 3. 使用`goto`方法导航到包含iframe的网页。 4. 使用`frames`方法获取页面中所有的iframe。 5. 使用`find`方法找到目标iframe，可以根据iframe的URL进行匹配。 6. 定位到目标iframe后，就可以对其进行操作，例如查找元素等。 以下是一个使用puppeteer获取指定iframe的示例代码： ```javascript const puppeteer = require('puppeteer'); async function getIframe() { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://example.com'); const targetIframe = await page.frames().find(frame => frame.url().includes('target-url')); // 对目标iframe进行操作，比如查找元素等 await browser.close(); } getIframe(); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值