精华内容
下载资源
问答
  • 页面iframe嵌套vue页面不刷新问题
    千次阅读
    2020-12-29 02:54:20

    $('#content iframe').attr('src',href);

    加上此行代码进行强制刷新,document.getElementById(iframe的ID).contentWindow.location.reload(true);

    var $div = $('.main-sidebar > .sidebar-menu');

    $div.on('click', 'li[data-href]', function () {

    var href = $(this).data('href');

    if (!!href && href!='undefined') {

    var curSelf = $('#content iframe').attr('src');

    var curPos = curSelf.lastIndexOf('#');

    var curPar = curSelf.substr(curPos);

    var pos = href.lastIndexOf('#');

    var par = href.substr(pos);

    $('#content iframe').attr('src',href);

    if(par != curPar && curPos !=-1){

    document.getElementById('iframe').contentWindow.location.reload(true);

    }

    //菜单增加样式

    if($(this).parents('li').data('href') == undefined){

    $(this).addClass('active');

    $(this).parent('ul').siblings().find('li').removeClass('active');

    }else{

    $(this).parents('li').addClass('active');

    $(this).parents('li').parent('ul').siblings().find('li').removeClass('active');

    }

    }

    return false;

    });

    更多相关内容
  • 用JS动态添加一段HTML代码到页面,且该段HTML中有内嵌iframe,现在这个iframe网页内容加载不出来. $("#divid").find("table[id=table_sdwan_branch]").last().after($("#div_sdwan_branch_show").get(0).innerHTML); ...
  • 在前期博文《Vue进阶(六十四):iframe更改src后页面未刷新问题解决》中讲解了iframe更改src后页面未刷新问题的解决方法,此篇博文主要讲解采用iframe方式嵌套页面IE下页面未展示问题的解决方法。 二、问题分析 ...


    一、前言

    在前期博文《Vue进阶(六十四):iframe更改src后页面未刷新问题解决》中讲解了iframe更改src后页面未刷新问题的解决方法,此篇博文主要讲解采用iframe方式嵌套页面IE下页面未展示问题的解决方法。

    二、问题分析

    项目的嵌套逻辑如下:

    通过 A项目系统a1页面点击菜单进入自己的发起页面,点击发起页面发起按钮,调用后台请求返回B项目系统待跳转b1页面URL,A项目系统通过iframe方式嵌套b1页面,其中b1页面通过iframe方式嵌套A项目系统a2页面及B系统其他页面。

    三、解决方法

    通过B项目系统检测到A项目系统传递的系统标识,向A系统发送消息,消息体中包含A系统待展示的页面URL,A系统通过监听接收到B系统发送过来消息,刷新当前页面,处理逻辑如下:
    A系统:

    <template>
      <div>
        <iframe v-if="hackReset" ref="otherSysIFrame" frameborder="0" height="1100" width="100%" :src="$route.params.url"></iframe>
      </div>
    </template>
    
    <script>
      export default {
        data () {
          return {
            hackReset: false
          }
        },
        updated () {
          this.hackReset = true
          this.$nextTick(() => {
            if (this.$refs.otherSysIFrame) {
              let iframeSrc = this.$route.params.url
              if (this.getClass(iframeSrc) === 'String' && iframeSrc.indexOf(window.location.host) > -1) {
                this.$refs.otherSysIFrame.contentWindow.location.href = iframeSrc
              }
            }
          })
        },
        watch: {
          $route: {
            handler () {
              this.hackReset = false
            }
          }
        },
        mounted () {
          this.hackReset = true
          window.addEventListener('message', event => {
            if (this.$refs.otherSysIFrame) {
              this.$refs.otherSysIFrame.contentWindow.postMessage(event.data, '*')
              // IE
              if (this.getIEVersion() !== -1) {
                if (this.getClass(event.data) === 'String' && event.data.indexOf('URL_LINK') > -1) {
                  let URL_LINK = JSON.parse(event.data).URL_LINK || ''
                  if (URL_LINK && this.getClass(URL_LINK) === 'String') {
                    let secondWindow = this.$refs.otherSysIFrame.contentWindow
                    for (let i = 0; i < secondWindow.frames.length; i++) {
                      secondWindow.frames[i].location.href = URL_LINK
                    }
                  }
                }
              }
            }
          })
        }
      }
    </script>
    

    B系统:

    if (vm.$route.query.source && (vm.$route.query.source === 'castlm' || vm.$route.query.source === 'exosystem')) {
      vm.isExosystem = true
      // 外系统返回按钮显示标识
      if (vm.$route.query.backBtnFlag === 'backBtn') {
        vm.backBtnFlag = true
        vm.display = true // 显示返回按钮
      } else {
        vm.display = false // 隐藏返回按钮
      }
      if (vm.$route.query.bustpid === 'PROC_CCMS_SMEIRA_Main') {
        vm.iframeRefreshFlag = true
      }
    
    else if (vm.query.flag && vm.query.flag === 'Exosystem') {
      vm.isExosystem = true
      if (vm.query.bustpid) {
        if (vm.query.bustpid === 'PROC_CCMS_SMEIRA_Main') {
          vm.iframeRefreshFlag = true
        }
        vm.bustpid = vm.query.bustpid
      }
      body = {
        tkiids: vm.query.tkiids,   // 任务实例id
        nodeid: vm.query.nodeid, // 当前环节
        tpid: vm.query.tpid,       // 模板ID
        piids: vm.query.piids,
        isEdit: vm.query.isEdit // 是否可编辑页面
      }
    }
    ....
    mounted () {
      // console.log('mounted!')
      // 挂载window.onresize事件
      let _this = this // 复制Vue的this
      _this.changeFrameSize()
      window.onresize = () => {
        _this.changeFrameSize()
      }
      // 应用定时器setInterval方法用于解决OFSM双层Iframe嵌套页签不显示问题,其中URL_LINK_OFSM为获取的嵌套页面URL
      if ((this.isOFSM || this.iframeRefreshFlag) && document.getElementById('iframe')) {
        var interval = setInterval(() => {
          if (this.URL_LINK_OFSM) {
            let data = {
              URL_LINK: this.URL_LINK_OFSM  // WFP标识
            }
            let newData = JSON.stringify(data)
            window.parent.postMessage(newData, '*')
            // 务必及时清除定时器,否则会导致浏览器崩溃
            clearInterval(interval)
          }
        }, 100)
      }
      // 处理任务进来后监听:用于外系统的Iframe内提交任务后返回待处理列表
      if (this.query.flag === 'WFP' && this.query.isEdit === '1') {
        window.addEventListener('message', this.listenerIframe)
      }
    },
    

    四、拓展阅读

    展开全文
  • iframe嵌套页面

    千次阅读 2021-06-20 08:33:37
    当看到标签中的 src 属性,就告诉我们可以在我们自己的网站页面加载其它的网站或者本站的其它页面内容,也就是嵌套页面。 在W3School里详细介绍: 1.支持iframe的浏览器 IE、Firefox、Chrome、Safari、Opera, 在...

    HTML里有着这么一个标签 ifarme 。我们把它称做为内联框架标签。刚开始学习搭建页面的时候基本用不上,到现在自己学习做项目后才明白了这个标签的重要性。当看到标签中的 src 属性,就告诉我们可以在我们自己的网站页面加载其它的网站或者本站的其它页面内容,也就是嵌套页面。
    在这里插入图片描述
    在W3School里详细介绍:
    1.支持iframe的浏览器

    IE、Firefox、Chrome、Safari、Opera,
    在不支持iframe的浏览器里是看不到嵌套效果的。

    2.iframe的定义和用法

    iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

    3.HTML与XHTML之间的差异

    在HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。

    4.提示

    您可以把需要的文本放置在 iframe 和 /iframe之间,这样就可以应对无法理解 iframe的浏览器。

    5.示例

    通常呢,我们使用iframe直接在页面嵌套标签设置指定src 值。接下来就把百度网页嵌套到自己的网页里面。

    在这里插入图片描述
    在这里插入图片描述
    但是,我们可以看到下图所示:iframe标签只有它自己的默认样式,嵌套进去的页面又小又窄,这并不是我们想要的iframe。

    在这里插入图片描述
    6.iframe的属性
    在这里插入图片描述
    给iframe设置一些需要的属性和样式。

    在这里插入图片描述

    展开全文
  • iframe页面嵌套问题

    万次阅读 2019-06-09 18:55:37
    iframe页面嵌套问题 开发工具与关键技术:VisualStudio C# 作者:落灵 撰写时间:2019/6/8 一、 iframe的框架根据内容自适应高度 iframe是在项目设计中经常用到的框架标签。而它的作用就是把页面嵌套在自身形成的...

    iframe页面嵌套问题

    开发工具与关键技术:VisualStudio C#
    作者:落灵
    撰写时间:2019/6/8
    

    一、 iframe的框架根据内容自适应高度
    iframe是在项目设计中经常用到的框架标签。而它的作用就是把页面嵌套在自身形成的框架体中,从而实现在一个固定的地方可以切换多个页面,并且其他内容不变。在使用iframe这个框架标签时新手往往是直接固定iframe的宽高。那么当文本内容的长度不一样时就要一个一个地设置。当有上百个页面时这无疑是增加了代码量。而这个问题的解决方法也非常简单,我们只需要让它自适应高度就好。
    在这里插入图片描述

    二、 点击iframe内部页面进行页面跳转问题
    iframe虽然可以嵌套多个页面,但也存在一个非常严重的问题。那就是iframe标签的页面跳转问题。正常情况下我们可以通过点击iframe框架区以外的地方来改变iframe嵌套的内容。但当我们在被iframe嵌套的页面里写window.location.href的页面跳转事件时,跳转的那个页面它不会覆盖掉当前的页面,而是被嵌套进iframe里。由于页面的宽度的百分比发生了变化,这对极大地影响被嵌套的页面的样式。例子如下图
    在这里插入图片描述
    就像上面这个样子。而不能让iframe内部嵌套的页面覆盖掉当前页面也是有原因的,因为这涉及到了安全性的问题。有iframe的一般都是主页面,如果让外来的页面把主页面覆盖掉,那么这个页面就可以对主页面进行操作,能够获取到主页面的信息。所以iframe內部嵌套的页面进行window.location.href的页面跳转时,跳转到的页面也会嵌套进iframe里面。
    可当我们点击iframe里面的页面跳转到另一个页面需要把当前的页面覆盖掉时又该怎么办?这是我们可以通过点击a标签进行跳转;
    在这里插入图片描述

    <a id="a_link" href="" target="_blank" hidden></a>
    

    target=”_blank”是从空白页打开新的页面,如果是target=”_self”就是从当前页面打开新的页面,如果是这样的话,打开的页面还是会被嵌套进iframe里面,所以我们从空白页打开。

    三、点击iframe外部的页面进行iframe页面嵌套问题
    这个问题是涉及到了iframe的主页面与其他页面的关联性。在首次加载主页面时我们可以在方法里用attr设置主页面的默认首次加载页面,然后再调用方法,这样就可以设置iframe首次加载的页面了。
    在这里插入图片描述
    可当有存在两个页面,点击一个页面的a标签,跳到主页面时iframe要把对应的页面嵌套进来。而主页面本身就有与另一个页面相同的标签,点击后就能把对应的页面嵌套进来。那么,问题就来了,怎么通过点击当前页面的标签触发另一个页面对应标签的点击事件?
    这个问题就需要通过控制器的参数传递了来解决了。我们可以在点击跳转到主页面的同时通过控制器传递一个参数到主页面。控制器接收到参数后用View.Data或者View.Bag接收参数,然后再在主页面设置一个隐藏的input标签接收参数。这时我们就可以通过对参数的判断让iframe嵌套对应的页面了。假如在a页面有学生,老师,校长这三个标签。点击学生时就把学生这个字段传递到主页面,主页面则判断传递过来的参数。当参数==“学生”时嵌套学生页面,参数==“老师”时嵌套老师页面,以此类推,问题就解决了。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • iframe嵌套,实现刷新页面 1. 判断iframe嵌套 使用window.top判断是否嵌套 window.self === window.top // true 表示 没有嵌套 // false 表示嵌套 2. iframe嵌套,,刷新 ...
  • 在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,有时候会遇到iframe加载很慢什么原因呢,该如何解决呢?带着这个问题一起通过本文学习,寻找答案吧! aaa.html <HTML> <HEAD> <...
  • 主要介绍了js通过iframe加载外部网页的实现代码,需要的朋友可以参考下
  • 在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来。这时,我们就要考虑是否可以等iframe加载完后再执行...
  • iframe 嵌入页面后无法显示的问题

    千次阅读 2020-09-04 09:12:40
    X-Frame-Options可用于指示是否应该允许浏览器呈现在一个页面<FRAME> 或 <IFRAME>中. 以确保网站内容是不是嵌入到其它网站. <head> <meta http-equiv="Content-Type" content="text/html; ...
  • iframe嵌套其它网站页面详解

    万次阅读 多人点赞 2019-07-19 11:32:17
    通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。 <iframe src="demo_iframe_sandbox.htm"></iframe> 但是,有追求的我们,并是想要这么low的iframe. 我们来看看在iframe中还可以...
  • 最近遇到个比较古怪的问题:当页面嵌套多个 Iframe 时会出现 Iframe 里包含的页面无法看到最新的页面信息。初步解决方案,在 Iframe 指向的页面地址后缀添加一个随机数或者时间戳。这样能确保每次在加载页面时,让...
  • iframeID 是加载Iframe ID号,修改成自己用的即可。 <iframe name=frames id=iframeID src=/> setTimeout(document.frames['+iframeID+'].location.href='+iurls+';,0); //或 setTimeout(document.frames['...
  • iframe嵌套iframe 页面高度自适应

    千次阅读 2020-06-28 15:39:36
    做项目的时候遇到了iframe嵌套iframe 需要页面高度跟随页面内容多少来显示。而且还能使用iframe自带的scrolling滚动条。 刚开始就算父iframe高度 计算错误,导致页面显示只显示一半的内容。 解决方法是 : 在...
  • 主要介绍了使用iframe网页中嵌入其他网页的方法,需要的朋友可以参考下
  • 使用ajax与iframe嵌套实现页面局部刷新。该javascript代码仅供参考,需按自己需要修改。​1. [代码]javascript代码function cj_start(depname,groupid){var urls = "/userGather.action";var status = "";var ...
  • 下面就给大家介绍一下iframe的使用及嵌套页面的实现 下面展示一些 内联代码片。 先给大家写一下嵌套页面的实现代码 <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="${...
  • easyui iframe 页面重复加载的问题

    热门讨论 2014-01-24 09:50:28
    解决使用tab布局过程中页面多次加载的问题 如果在使用easyui过程中,你使用了easyui 的tab布局,在tab布局的内容上使用的不是content,而是iframe,那么你的页面有可能多次加载了,这篇文章帮你解决问题
  • 跨域获取微信html内容,替换data-src为src参考:http://stackoverflow.com/questions/15005500/loading-cross-domain-html-page-with-ajax引用:https://github.com/Rob--W/cors-anywhere/2.通过datasrc注入iframe:$...
  • Iframe页面嵌套

    万次阅读 2019-05-15 19:30:53
    在做项目的时候为了方便经常会用到嵌套标签来嵌套页面。因为一个系统里会有多个大模块,每一个大模块里又有好多个小模块,而每一个小模块又是由页面构建而成。所以,做项目的时候就会在模版里面嵌套内容。在主页面上...
  • 最近做的合作网站嵌入到对方的iframe中去,在safari,opera和有些版本的搜狗浏览器(内核版本原因)中能读到cookie。
  • iframe嵌套页面 跨域

    千次阅读 2021-06-10 17:40:19
    如何用javascript 跨域获取iframe子页面的元素信息我的iframe嵌套在别人页面上,在iframe中ajax访问...以前没这问题啊,我更新了一下界面,难道是换了个jquery版本?只要是同个域名下的文件(即使在同个文件夹),就...
  • IE6下用iframe嵌套页面:被嵌套页面如果有如下css:html { position: relative; }会导致出现如下问题:被嵌套页面先加载出来,然后变为空白。原因:被嵌套html定位到西伯利亚去了。解决办法:在被嵌套的html加载完成...
  • vue嵌套iframe一系列问题

    万次阅读 2019-05-14 13:30:05
    vue嵌套iframe一系列问题 最近在项目中遇到一个需求需要在一个项目中直接引用另一个项目,尝试各种情况无果后选择了iframe。现将调用过程中遇到的问题做一个分享。 router.go()的使用   此情况主要适用于更改...
  • 在vue开发项目的过程中,需要在自己的页面框架中,引用别人做的页面功能,但又想直接跳转,失去整个系统的统一性,只想在这个子页面(子路由里跳转),那么如何实现呢? 很简单!iframe就可以帮我们完成! 本文将...
  • iframe里面又嵌套了一个iframe,就第一次点击的时候页面显示,其他在点击页面不显示,检查元素时,内容都在,只是显示,在网上找个方法,重新加载一下子页面 原地址:...
  • vue iframe嵌套外部网页

    千次阅读 2020-06-17 18:18:22
    iframe src="外部网页url" id="mobsf" frameborder="0" style="position:absolute;"></iframe> </div> </template> <script> export default { data () { return { } }, mounte
  • 在使用iframe时,iframe背景为白块,刷新时也会闪过白块。如果刷新时间长,就会一直出现白块,让人很烦恼,通过网上搜资料,测试很多依然没有效果,最终解决方法如下所示,注意主要针对IE浏览器测试。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,721
精华内容 4,688
关键字:

iframe嵌套页面加载不出来