2015-01-08 31 views
8

Sau 3 ngày nghiên cứu và thử và lỗi, tôi không thể lấy iframe cũng như nội dung của nó để kích hoạt sự kiện thay đổi kích cỡ để chức năng thay đổi kích cỡ của tôi được gọi. Nếu tôi sử dụng ... kích hoạt ("thay đổi kích thước"); để kích hoạt sự kiện thay đổi kích thước theo cách thủ công, chức năng thay đổi kích cỡ của tôi được gọi và hoạt động. Trang được tải trong khung nội tuyến nằm trên cùng một tên miền (http://localhost:81/curlExample/) làm trang chứa iframe. Cuối cùng, trang trong khung nội tuyến sẽ được cung cấp bởi phương pháp curl php, nhưng tôi muốn làm cho nó hoạt động trước tiên.Iframe không kích hoạt thay đổi kích thước sự kiện

******* Đã cập nhật ******** Làm cách nào để nhận được sự kiện thay đổi kích thước được kích hoạt khi tôi đổi kích thước cửa sổ trình duyệt khiến khung nội tuyến điều chỉnh kích thước của nó?


Cảm ơn sự giúp đỡ của bạn!

trang với 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>

trang trong 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>

+1

Um, tại sao bạn không nghe thay đổi kích thước trên cửa sổ hiện tại? – epascarello

+0

Không chính xác chắc chắn là gì hoặc không hoạt động hoặc mục tiêu là gì, hoặc những gì bạn mong đợi từ 'resize' – charlietfl

Trả lời

8

Yếu tố sẽ không bao giờ gây ra một sự kiện thay đổi kích thước, giống như một số <img> o r a <div>. Bạn phải nhận sự kiện này từ window. Vì tài liệu iframe của bạn xuất phát từ cùng một nguồn gốc của tài liệu gốc, bạn có thể truy cập contentWindow và bất kỳ thông tin nào khác.

Vì vậy, hãy thử này:

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

tôi đã làm nó useing chỉ DOM của addEventListener.

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

2 năm sau và bây giờ chúng tôi có Resize Observer trong trình duyệt, cho phép bạn xem để thay đổi kích thước sự kiện trên từng cá nhân các phần tử https://developers.google.com/web/updates/2016/10/resizeobserver – wesbos

Các vấn đề liên quan