iframeでサイズ変更イベントが発生しない

3日間の調査と試行錯誤の末、iframeやその内容を取得してサイズ変更イベントをトリガして、サイズ変更機能を呼び出すことができません。私が使用する...トリガ（ "サイズ変更"）; resizeイベントを手動でトリガするために、私のサイズ変更関数が呼び出されて動作します。 iframeに読み込まれたページは、iframeを含むページと同じドメイン（http://localhost:81/curlExample/）にあります。最終的に、iframeのページはPHPのcurlメソッドによって提供されますが、まずそれを動作させたいと思います。iframeでサイズ変更イベントが発生しない

******* ******** iframeにサイズを調整させるブラウザウィンドウのサイズを変更すると、どのようにresizeイベントが発生するのですか？

ありがとうございました！ 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>

出典

2015-01-08 ermSO

なぜ、現在のウィンドウでリサイズしないのですか？ – epascarello

2年後に何が働いているのか、何が目的であるのか、また 'resize' – charlietfl

要素は、resizeイベントをトリガすることはありませんと

ページ、 <img>のようにr a <div>。このイベントはwindowから取得する必要があります。 iframeされたドキュメントは親ドキュメントの元のものと同じで、contentWindowと他のアトリビュートにアクセスできます。

ので、これを試してみてください。

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

を私はDOMのaddEventListenerをuseingそれをやりました。

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

出典

2015-01-08 18:06:53 Aurium

から何を期待しているのかわかりません。ブラウザにResize Observerがあります。これにより、個人のリサイズイベントを見ることができます。要素https://developers.google.com/web/updates/2016/10/resizeobserver – wesbos

iframeでサイズ変更イベントが発生しない

答えて

関連する問題