首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

重新加载后从子iframe自动调用js函数不起作用

可能是由于以下原因导致:

  1. 跨域限制:浏览器出于安全考虑,限制了跨域的脚本调用。如果父页面和子iframe的域名不一致,浏览器会阻止跨域调用。解决方法可以是使用postMessage API进行跨域通信,或者在服务器端进行代理转发。
  2. 加载顺序问题:重新加载后,子iframe可能还未完全加载完成,就尝试调用其中的js函数,导致调用不起作用。可以通过监听子iframe的加载事件,确保在加载完成后再调用相应的js函数。
  3. 作用域问题:重新加载后,子iframe中的js函数可能不在父页面的作用域内,无法直接调用。可以通过在父页面中定义一个全局函数,并在子iframe中调用该全局函数来实现跨页面调用。
  4. 缓存问题:重新加载后,浏览器可能会使用缓存的版本加载子iframe,而不是重新请求服务器获取最新的内容。可以通过在URL中添加随机参数或者设置相应的HTTP头来禁用缓存,确保每次都获取最新的子iframe内容。

总结:重新加载后从子iframe自动调用js函数不起作用可能是由于跨域限制、加载顺序问题、作用域问题或缓存问题导致的。解决方法可以是使用postMessage API进行跨域通信、监听子iframe的加载事件、确保作用域正确、禁用缓存等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

12 道腾讯前端面试真题及答案整理

firefox包括高版本的IE,但是在HTTPS下面不起作用,需要meta来强制开启功能 这是DNS的提前解析,并不是css,js之类的文件缓存,大家不要混淆了两个不同的概念。...如果直接做了js的重定向,或者在服务端做了重定向,没有在link里面手动设置,是不起作用的。...输出:爬虫不会执行 js 获取内容 少用 iframe(搜索引擎不会抓取 iframe 中的内容) 非装饰性图片必须加 alt 提高网站速度(网站速度是搜索引擎排序的一个重要指标) 4....第一步,通过使用 pushState + ajax 实现浏览器无刷新前进后退,当一次 ajax 调用成功我们将一 条 state 记录加入到 history 对象中。...,在调用某个组件时再加载对应的js文件; root中插入loading 或者 骨架屏 prerender-spa-plugin,提升用户体验; 如果在webview中的页面,可以进行页面预加载 独立打包异步组件公共

1.6K20

12 道腾讯前端面试真题及答案整理,实用!

firefox包括高版本的IE,但是在HTTPS下面不起作用,需要meta来强制开启功能 这是DNS的提前解析,并不是css,js之类的文件缓存,大家不要混淆了两个不同的概念。...如果直接做了js的重定向,或者在服务端做了重定向,没有在link里面手动设置,是不起作用的。...输出:爬虫不会执行 js 获取内容 少用 iframe(搜索引擎不会抓取 iframe 中的内容) 非装饰性图片必须加 alt 提高网站速度(网站速度是搜索引擎排序的一个重要指标) 4....第一步,通过使用 pushState + ajax 实现浏览器无刷新前进后退,当一次 ajax 调用成功我们将一 条 state 记录加入到 history 对象中。...,在调用某个组件时再加载对应的js文件; root中插入loading 或者 骨架屏 prerender-spa-plugin,提升用户体验; 如果在webview中的页面,可以进行页面预加载 独立打包异步组件公共

1.9K20
  • 客服弹窗中使用layer库自定义展示的标题 - 网站网页在线客服源码教程

    var iframe = layero.find('iframe'); // 获取到弹窗中的iframe元素 var btnReload = layero.find('#btn-reload...'); // 获取到按钮 btnReload.click(function(){ iframe.attr('src', iframe.attr('src')); // 重新加载iframe的内容...}); 在这个例子中,我在自定义标题里面增加了一个按钮,实现点击重新加载弹窗内容的效果 我们使用了jQuery的click()方法来处理按钮的点击事件。...在按钮的回调函数中,我们使用了iframe的attr()方法来重新设置src属性,从而重新加载iframe的内容。...这个里面move:false很重要,不能允许拖动,否则点击事件不起作用 在唯一客服(gofly.v1kf.com)里面,我是在标题上增加了一个切换成英文的按钮,看效果

    1.1K30

    美团前端常见面试题整理_2023-02-23

    调用 setTimeout 函数,并定义其完成执行的回调函数 console.log('script end') //3....1); // 返回一个新函数 let curried = function () { // 新函数调用时会继续传参 let allArgs = [...args...几种方式是: 将 js 脚本放在文档的底部,来使 js 脚本尽可能的在最后来加载执行 给 js 脚本添加 defer 属性,这个属性会让脚本的加载与文档的解析同步解析,然后在文档解析完成再执行这个脚本文件...多个设置了 defer 属性的脚本按规范来说最后是顺序执行的,但是在一些浏览器中可能不是这样 给 js 脚本添加 async属性,这个属性会使脚本异步加载,不会阻塞页面的解析过程,但是当脚本加载完成立即执行...js 脚本 图片 怎么判断页面是否加载完成 Load 事件触发代表页面中的 DOM,CSS,JS,图片已经全部加载完毕。

    1.9K10

    Vue隐藏技能:运行时渲染用户写入的组件代码!

    对于没有设置 src 的 iframe,页面只能加载一个空的 iframe,因此还需要在 iframe 加载再动态加载依赖的资源,如:vuejs,其他运行时的依赖库(示例 demo 加载了 ant-design-vue...如果设置了 src,则可以将依赖通过 script 标签和 link 标签提前写到静态页面文件中,使依赖资源在加载 iframe自动完成加载。...$mount('#app') }, }, 注意点: iframe 的渲染到文档流才能添加依赖资源,依赖资源加载完才能执行 vm 的挂载,首次加载时需要控制时序 vm 挂载点的重建采用了永远添加在...挂载的错误处理稍有不同,为了尽量不干预用户的代码,此模式下的错误渲染采用重建 DOM,重新渲染 vm 的策略,即发生错误,无论是静态的语法错误还是运行时错误,都重绘。...有一点还需要注意,如果挂载 vm 时需要依赖某些资源,需要添加资源加载的回调,加载成功再通知主域挂载。

    3.6K10

    40道+JavaScript基础面试题(附答案)

    JS的延迟加载有助与提高页面的加载速度。 defer和async、动态创建DOM方式(用得最多)、按需异步载入JS defer:延迟脚本。...$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用JSONP的回调函数。...每个页面至少需要一次回流,就是在页面第一次加载的时候。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树。...完成回流,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘 32、 DOM操作 (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement...,addCallback是用来注册flash函数js调用

    1.1K10

    js跨域解决方案

    一、问题描述 在页面渲染时需要动态获取iframe子页面的高度,然后重新设置iframe高度,达到自适应的目的,但是由于iframe子页面中也涉及到访问其他系统的页面,这就使得页面渲染时无法获取子页面高度...(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数...网上有很多例子,很容易找到,不过该解决方案存在一些问题: a 安全性,当一个站点(b.a.com)被攻击,另一个站点(c.a.com)会引起安全漏洞 b如果一个页面中引入多个iframe,要想能够操作所有.../*.js"; document.body.appendChild(script); 这样通过动态创建script标签就可以加载其它域的js文件,然后通过本页面就可以调用加载js文件的函数,这样做的缺陷就是不能加载其它域的文档...3、通过iframe嵌套来实现跨域 前提,www.a.com下a.html,a.html内iframe调用了www.b.com下的b.html,b.html下iframe调用了www.a.com下的c.html

    4K10

    无界微前端是如何渲染子应用的?

    停止 iframe加载(stopIframeLoading) 为什么要停止 iframe加载?...因为要创建一个纯净的 iframe,防止 iframe 被污染,假如该 url 的 JS 代码,声明了一些全局变量、函数,就可能影响到子应用的运行(假如子应用也有同名的变量、函数) 为什么 iframe...external 是相对于解析的 HTML 模板来说的,由于解析的 HTML 不带有任何的 js 和 css,所以这里的 external,就是指模板外的所有 JS 无界与 qiankun 的在解析...• var 声明的变量,原本是全局变量,包一层函数,变量会被留在函数内 于是就有了下面的方案: // 挟持 iframeWindow.Document.prototype 的 querySelector...} 在 stopIframeLoading ,即停止 iframe 加载,获得纯净的 iframe

    1.3K30

    爱奇艺号微前端架构实践

    从子模块生成的manifest.json(后面微前端模块部分会介绍)中获取子模块的路由js文件并将其解析,再加入主路由中。经过此番操作,同一个窗口再次访问这个地址时就会直接匹配成功主路由了。...每个微前端模块都定义有一个全局的渲染函数,比如window.mp.render_home(‘#containerId’)则会调用微前端模块中的Vue实例化、渲染函数,这一点会在后文详细讲述。...Webpack打包时会将每一个entry生成一个js文件以便单独调用,因为每个entry js代码都包含初始化框架的逻辑,所以理论上每个entry代码都可以独立运行; 3、因为每次部署所有js代码的hash...容器应用加载完成js文件,可以直接调用window.mp.home_routes()获来取已定义好的ROUTES配置。...entry文件与正常的初始化Vue方式一样,只是需要将初始化逻辑包裹在一个全局函数中,以便主容器能在加载此模块js完毕,方便的进行渲染调用。例如: ?

    1.2K32

    爱奇艺号微前端架构实践

    从子模块生成的manifest.json(后面微前端模块部分会介绍)中获取子模块的路由js文件并将其解析,再加入主路由中。经过此番操作,同一个窗口再次访问这个地址时就会直接匹配成功主路由了。...每个微前端模块都定义有一个全局的渲染函数,比如window.mp.render_home(‘#containerId’)则会调用微前端模块中的Vue实例化、渲染函数,这一点会在后文详细讲述。...Webpack打包时会将每一个entry生成一个js文件以便单独调用,因为每个entry js代码都包含初始化框架的逻辑,所以理论上每个entry代码都可以独立运行; 3、因为每次部署所有js代码的hash...容器应用加载完成js文件,可以直接调用window.mp.home_routes()获来取已定义好的ROUTES配置。...entry文件与正常的初始化Vue方式一样,只是需要将初始化逻辑包裹在一个全局函数中,以便主容器能在加载此模块js完毕,方便的进行渲染调用。例如: ?

    91710

    无界微前端是如何渲染子应用的?

    )为什么要停止 iframe加载?...因为要创建一个纯净的 iframe,防止 iframe 被污染,假如该 url 的 JS 代码,声明了一些全局变量、函数,就可能影响到子应用的运行(假如子应用也有同名的变量、函数)为什么 iframe...external 是相对于解析的 HTML 模板来说的,由于解析的 HTML 不带有任何的 js 和 css,所以这里的 external,就是指模板外的所有 JS无界与 qiankun 的在解析...var 声明的变量,原本是全局变量,包一层函数,变量会被留在函数内于是就有了下面的方案:// 挟持 iframeWindow.Document.prototype 的 querySelector//...在 stopIframeLoading ,即停止 iframe 加载,获得纯净的 iframe ,再对副作用进行处理无界微前端 JS 有非常多的副作用需要修正处理,文章不会一一列举,这里会说一下大概

    5.2K30

    JavaScript中的沙箱机制探秘

    最后调用callback函数,并将实例指针抛给它。...然而即便如此iframe也存在隐患:如包裹页面仍可以通过自动播放视频、插件和弹出框来干扰外部页面。...面对这个问题,iframe的sandbox属性提供了解决之道,它能对iframe中的内容加以限制,我们可以通过设置sandbox属性达到只在一个低权限环境中加载不可信内容的目的。...在一些解决方案中,有的提出了真正重新初始化一个js引擎的做法,如Narrative JavaScript,它可以自行编译和执行代码,达到精确控制沙箱的效果。这在将来或许能得到更多的应用。..._message_queue.push(message); } }; module.exports = Sandbox; } 在调用方法,sandbox利用spawn函数获取一个子进程

    2.8K31

    vivo 悟空活动中台 - 微组件状态管理(下)

    微组件感知到这些操作,就会执行相应的自定义业务逻辑,如参数校验,业务检查,错误提示等。...Hook, 就是微组件可以注册一系列的平台的生命周期方法,这些方法会自动被平台收集,在平台的关键节点被调用。...当 prop 组件被加载的时候, platformActionHook 会调用平台的能力自动的对内部的钩子方法进行自动收集。...另外,我们编辑器支持拖动组件的位置进行重新排列组件渲染。 怎么样保证 hook 顺序和组件的渲染顺序一致呢?...实时记住上次错误的组件索引当下次这个组件在属性面板中被正常渲染出来就调用内部的钩子函数进行错误回溯。就如上图,可以提示用户上次为什么保存活动不成功。

    1.7K40

    WKWebView 那些坑

    B、检测 webView.title 是否为空 并不是所有H5页面白屏的时候都会调用上面的回调函数,比如,最近遇到在一个高内存消耗的H5页面上 present 系统相机,拍照完毕返回原来页面的时候出现白屏现象...不过这种方法依然解决不了页面 iframe 跨域请求的 Cookie 问题,毕竟-[WKWebView loadRequest:]只适合加载 mainFrame 请求。...无奈之下,我们只能约定一个JS接口,让游戏开发商实现该接口,具体是通过 canvas getImageData()方法取得图片数据返回 base64 格式的数据,客户端在需要截图的时候,调用这个JS接口获取...WKWebView 退出并被释放导致completionHandler变成野指针,而此时 javaScript Core 还在执行JS代码,待 javaScript Core 执行完毕后会调用completionHandler...8.2、goBack API问题 WKWebView 上调用 -[WKWebView goBack], 回退到上一个页面不会触发window.onload()函数、不会执行JS

    4.5K130

    Puppeteer已经取代PhantomJs

    重新加载页面 page.waitForNavigation:等待页面跳转 Pupeeteer 中的基本上所有的操作都是异步的,以上几个 API 都涉及到关于打开一个页面,什么情况下才能判断这个函数执行完毕呢...page.on(‘close’) 页面关闭 page.on(‘console’) console API 被调用 page.on(‘error’) 页面出错 page.on(‘load’) 页面加载完...//在页面中调用 Node.js 环境中的函数 const myHash = await window.md5('PUPPETEER'); console.log(`md5...,这个函数在 Node 环境中执行,有机会在浏览器环境中调用 Node.js 相关函数库 6、 抓取 iframe 中的元素 一个 Frame 包含了一个执行上下文(Execution Context)...,我们不能跨 Frame 执行函数,一个页面中可以有多个 Frame,主要是通过 iframe 标签嵌入的生成的。

    6.2K10

    WKWebView 那些坑

    1.2、检测webView.title是否为空 并不是所有页面白屏的时候都会调用上面的回调函数,比如,最近遇到在一个高内存消耗的H5页面上present系统相机,拍照完毕返回原来页面的时候出现白屏现象...(拍照过程消耗了大量内存,导致内存紧张,webContent process被系统挂起),但上面的回调函数并没有被调用。...不过这种方法依然解决不了页面iframe跨域请求的Cookie问题,毕竟-[WKWebView loadRequest:]只适合加载mainFrame请求。...无奈之下,我们只能约定一个JS接口,让游戏开发商实现该接口,具体是通过canvas getImageData()方法取得图片数据返回base64格式的数据,客户端在需要截图的时候,调用这个JS接口获取...8.2、goBack API问题 WKWebView上调用 -[WKWebView goBack], 回退到上一个页面不会触发window.onload()函数、不会执行JS

    17.2K21

    【实战】快来和我一起开发一个在线 Web 代码编辑器

    在这里,title 是一个文本字符串,onClick 是一个在单击按钮时调用函数。 接下来,我们使用 标签来声明按钮,并使用 style 属性来设置按钮的样式。...当在 App.js调用编辑器时,这三个 prop 将在编辑器的任何实例中提供。 让我们使用 ControlledEditorComponent 为我们的编辑器编写代码。...也就是说,每次用户按下一个键时,它都会重新开始计数,因此 iframe 只会在用户空闲(未键入)250 毫秒时更新。 这是避免每次按下键时都必须更新 iframe 的一种很酷的方法。...我们没有考虑 iframe 的安全问题,主要是因为我们在 iframe加载了内部 HTML 文档,而不是外部文档。 所以我们不需要考虑太多,因为 iframe 非常适合我们的用例。...对于 iframe,另一个考虑因素是页面加载时间,因为 iframe加载的内容通常不受你的控制。 在我们的应用程序中,这不是问题,因为我们的 iframe 内容不是外部的。

    70920

    开发一个在线 Web 代码编辑器,如何?今天来教你!

    在这里,title 是一个文本字符串,onClick 是一个在单击按钮时调用函数。 接下来,我们使用 标签来声明按钮,并使用 style 属性来设置按钮的样式。...当在 App.js调用编辑器时,这三个 prop 将在编辑器的任何实例中提供。 让我们使用 ControlledEditorComponent 为我们的编辑器编写代码。...也就是说,每次用户按下一个键时,它都会重新开始计数,因此 iframe 只会在用户空闲(未键入)250 毫秒时更新。这是避免每次按下键时都必须更新 iframe 的一种很酷的方法。...我们没有考虑 iframe 的安全问题,主要是因为我们在 iframe加载了内部 HTML 文档,而不是外部文档。所以我们不需要考虑太多,因为 iframe 非常适合我们的用例。...对于 iframe,另一个考虑因素是页面加载时间,因为 iframe加载的内容通常不受你的控制。在我们的应用程序中,这不是问题,因为我们的 iframe 内容不是外部的。

    12K30
    领券