iframe不触发调整大小事件

ermSO

经过3天的研究和反复试验,我无法获取iframe或其内容来触发调整大小事件,因此无法调用调整大小函数。如果我使用... trigger(“ resize”); 要手动触发调整大小事件,我的调整大小函数将被调用并起作用。iframe中加载http://localhost:81/curlExample/的页面与包含iframe的页面位于同一个域()中。最终,iframe中的页面将由php curl方法提供,但是我想使其首先工作。

*******更新********当我调整浏览器窗口的大小并导致iframe调整其大小时,如何触发调整大小事件?


谢谢您的帮助!

iframe页面

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   
    function setResize()
    {
        window.alert("Hello");
      
        var iframeRef = document.getElementById('displayframe');
        $(iframeRef).on("resize", function(){
            var xExp = 0;
            window.alert("Resize event fired.");
            
        });
    }
  
    $('#displayframe').load(function()
    {
        alert("Hello from iFrame.  Load event fired.");
        var myStallTime = setTimeout(setResize, 3000);

    });

});
</script>
</head>
<body>

<p id="myP">Hello</p>

<iframe id="displayframe" src="http://localhost:81/curlExample/HelloIframe.xhtml" style="height:250px; width:100%;">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

iframe中的页面(HelloIframe.xhtml)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TODO supply a title</title>
    </head>
    <body>
        <div id="myContent" style="width:100%; height:200px;">
            <h1>TODO write content</h1>
            <h2>Extremity sweetness difficult behaviour he of</h2>

            <p>Agreed joy vanity regret met may ladies oppose who. Mile fail as left as hard eyes. Meet made call in mean four year it to. Prospect so branched wondered sensible of up. For gay consisted resolving pronounce sportsman saw discovery not. Northward or household as conveying we earnestly believing. No in up contrasted discretion inhabiting excellence. Entreaties we collecting unpleasant at everything conviction.</p>

            <p>Yet remarkably appearance get him his projection. Diverted endeavor bed peculiar men the not desirous. Acuteness abilities ask can offending furnished fulfilled sex. Warrant fifteen exposed ye at mistake. Blush since so in noisy still built up an again. As young ye hopes no he place means. Partiality diminution gay yet entreaties admiration. In mr it he mention perhaps attempt pointed suppose. Unknown ye chamber of warrant of norland arrived.</p>

        </div>
    </body>
</html>

奥里乌斯

<iframe>元素将永远不会触发resize事件,像一个<img>或一个<div>您必须从获得此事件window由于iframe文档与父文档来自同一来源,因此您可以访问其iframe文档contentWindow和其他任何属性。

因此,请尝试以下操作:

var iframeWin = document.getElementById('displayframe').contentWindow;
$(iframeWin).on('resize', function(){ ... });

我只使用DOM的addEventListener

var iframeWin = document.getElementById('displayframe').contentWindow;
iframeWin.addEventListener('resize', function(){ ... });

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

.trigger()不触发自动调整大小事件

来自分类Dev

Paperjs触发调整大小事件

来自分类Dev

移动Chrome在滚动时触发调整大小事件

来自分类Dev

为什么我的调整大小事件没有触发?

来自分类Dev

获取Iframe的高度和调整大小事件

来自分类Dev

所有图像调整大小后如何触发调整大小事件

来自分类Dev

重新实现调整大小事件

来自分类Dev

HTML textarea调整大小事件

来自分类Dev

重新实现调整大小事件

来自分类Dev

响应jQuery中的调整大小事件

来自分类Dev

在tmux中检测调整大小事件

来自分类Dev

使用jQuery更改css属性时,防止触发Windows调整大小事件

来自分类Dev

使用cy.viewport()时如何触发窗口调整大小事件

来自分类Dev

为什么调整大小事件仅触发一次

来自分类Dev

Angular 1-测试中触发窗口调整大小事件

来自分类Dev

在触发调整大小事件之前,粒子 js 无法正确显示

来自分类Dev

iframe跨域通信-调整大小事件-跨浏览器?

来自分类Dev

嵌入在 iframe 调整大小事件中的 Angular2 应用程序

来自分类Dev

取消JQueryUI可调整大小的调整大小事件

来自分类Dev

Qt QGraphicsview如何挂钩以调整大小事件

来自分类Dev

无法获取根窗口调整大小事件

来自分类Dev

使用SwiftUI观察窗口调整大小事件

来自分类Dev

Dart Polymer分芯器:拖动/调整大小事件

来自分类Dev

Python - 修改为调整大小事件的最佳刻度数

来自分类Dev

无法使 jQuery 调整大小事件按预期工作

来自分类Dev

TinyMCE 4.x 调整大小事件

来自分类Dev

如文档所述,当“可调整大小”元素被隐藏/取消隐藏时,不会触发聚合物IronResizableBehavior铁调整大小事件

来自分类Dev

设置特定大小后,在窗口调整大小事件中,Highcharts图表调整大小

来自分类Dev

设置特定大小后,在窗口调整大小事件中高图表图表调整大小

Related 相关文章

  1. 1

    .trigger()不触发自动调整大小事件

  2. 2

    Paperjs触发调整大小事件

  3. 3

    移动Chrome在滚动时触发调整大小事件

  4. 4

    为什么我的调整大小事件没有触发?

  5. 5

    获取Iframe的高度和调整大小事件

  6. 6

    所有图像调整大小后如何触发调整大小事件

  7. 7

    重新实现调整大小事件

  8. 8

    HTML textarea调整大小事件

  9. 9

    重新实现调整大小事件

  10. 10

    响应jQuery中的调整大小事件

  11. 11

    在tmux中检测调整大小事件

  12. 12

    使用jQuery更改css属性时,防止触发Windows调整大小事件

  13. 13

    使用cy.viewport()时如何触发窗口调整大小事件

  14. 14

    为什么调整大小事件仅触发一次

  15. 15

    Angular 1-测试中触发窗口调整大小事件

  16. 16

    在触发调整大小事件之前,粒子 js 无法正确显示

  17. 17

    iframe跨域通信-调整大小事件-跨浏览器?

  18. 18

    嵌入在 iframe 调整大小事件中的 Angular2 应用程序

  19. 19

    取消JQueryUI可调整大小的调整大小事件

  20. 20

    Qt QGraphicsview如何挂钩以调整大小事件

  21. 21

    无法获取根窗口调整大小事件

  22. 22

    使用SwiftUI观察窗口调整大小事件

  23. 23

    Dart Polymer分芯器:拖动/调整大小事件

  24. 24

    Python - 修改为调整大小事件的最佳刻度数

  25. 25

    无法使 jQuery 调整大小事件按预期工作

  26. 26

    TinyMCE 4.x 调整大小事件

  27. 27

    如文档所述,当“可调整大小”元素被隐藏/取消隐藏时,不会触发聚合物IronResizableBehavior铁调整大小事件

  28. 28

    设置特定大小后,在窗口调整大小事件中,Highcharts图表调整大小

  29. 29

    设置特定大小后,在窗口调整大小事件中高图表图表调整大小

热门标签

归档