【问题标题】:JS: Resize div when an iframe was clicked?JS:单击 iframe 时调整 div 的大小?
【发布时间】:2014-11-03 12:39:16
【问题描述】:

我有一个完整的 <iframe /> 和一个 div 作为父级。该 iframe 来自不同的域。单击 iframe 时,如何将父 div 的大小调整为更大(在我的情况下添加类)?并在点击 iframe 的关闭按钮时调整其大小?

我更喜欢iframe 中的按钮调整大小,但显然无法在 iframe 内部访问 div,所以我必须在 iframe 外部进行。

【问题讨论】:

    标签: javascript iframe


    【解决方案1】:

    我遇到了同样的问题,写了一个 jquery 插件。 https://github.com/BergenSoft/iframeActivationListener

    查看示例:
    http://jsfiddle.net/56g7uLub/3/

    使用方法:

    $(document).ready(function ()
    {
        $('iframe').iframeActivationListener();
        $('iframe').on("activate", function(ev) {
            $(ev.target).addClass("big");
        });
    });
    

    此插件不使用覆盖 div。
    它检查鼠标是否在非活动 iframe 上并开始查看文档的 activeElement。 当它更改为另一个 iframe 时,将引发自定义事件“activate”。

    这是我发现的最佳解决方案。

    【讨论】:

      【解决方案2】:

      您必须创建某种叠加层来检测 iframe 的初始焦点事件。如果您根据类别显示,关闭按钮也可以成为您网站的一部分。

      http://jsfiddle.net/cxtgn72g/4/

      HTML

      <div id="iframe">
          <div id="overlay"></div>
          <div id="close">X</div>
          <iframe src="//www.youtube.com/embed/6PRq7CmiWhM?list=PLIOa6mDiSeismsV_7YFti-5XOGRzmofSZ"></iframe>
      </div>
      

      JS - 需要 jQuery

      $("#overlay").click(function() {
          $("#iframe").addClass("big");
      });
      
      $("#close").click(function() {
          $("#iframe").removeClass("big");        
      });
      

      CSS

      #iframe {
          width : 500px;
          height : 300px;
          position : relative;
      }
      
      #iframe.big {
          width : 600px;
          height : 400px;
      }
      
      iframe {
          width : 100%;
          height : 100%;
          border : none;
      }
      
      #overlay {    
          position : absolute;
          left : 0;
          top : 0;
          width : 100%;
          height : 100%;
      }
      
      #close {
          display : none;
      }
      
      .big #close {
          cursor : pointer;
          display : block;
          position : absolute;
          right : 10px;
          top : 10px;
          content : "X";
          background : red;
          color : white;
          border-radius : 25%;
          padding : 8px;
      }
      
      .big #overlay {
          display : none;
      }
      

      【讨论】:

      • 不需要jquery(事实上,一定不需要)。我正在开发一个基于 iframe 的聊天小部件,所以我必须假设客户端没有 jquery。我可以使用 js className 来实现它。至于关闭按钮,它也不能在 iframe 之外。
      • 所以基本上你正在创建一个聊天插件供人们注入他们的网站。需要插件的不是你的网站吗?
      • 是的,已经完成了,感谢您的帮助(顺便说一句,我有一个 github repo,只是为了测试)
      【解决方案3】:

      试试这个:

      document.getElementById("myIFrame").onclick = function(){    
          document.getElementById("myDiv").className = ""; //New Class Name
      };
      

      祝你好运!

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-12-21
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多