2015-01-08 10 views
8

अनुसंधान और परीक्षण और त्रुटि के 3 दिनों के बाद, मैं आईफ्रेम और न ही इसकी सामग्री को आकार बदलने के लिए सक्षम नहीं हूं ताकि मेरा आकार बदलने का कार्य कहा जा सके। अगर मैं उपयोग करता हूं ... ट्रिगर ("आकार बदलें"); एक आकार बदलने की घटना को मैन्युअल रूप से ट्रिगर करने के लिए, मेरा आकार बदलने का कार्य कहा जाता है और काम करता है। Iframe में लोड किया गया पृष्ठ एक ही डोमेन (http://localhost:81/curlExample/) पर है, जिसमें iframe वाला पृष्ठ है। आखिरकार, आईफ्रेम में पृष्ठ को PHP कर्ल विधि द्वारा आपूर्ति की जाएगी, लेकिन मैं इसे पहले काम करना चाहता हूं।Iframe आकार बदलने का ट्रिगर नहीं करता

******* अपडेट किया गया ******** जब मैं ब्राउज़र विंडो का आकार बदलता हूं तो आकार बदलने की घटना को कैसे ट्रिगर किया जाता है जिससे आईफ़्रेम अपने आकार को समायोजित कर सकता है?


आपकी मदद के लिए धन्यवाद!

आइफ्रेम आइफ्रेम (HelloIframe.xhtml) के भीतर

<!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>

पृष्ठ

<?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

उम, आप वर्तमान विंडो पर आकार बदलने क्यों नहीं सुन रहे हैं? – epascarello

+0

2 साल बाद यह सुनिश्चित नहीं है कि क्या है या क्या काम नहीं कर रहा है या लक्ष्य क्या हैं, या आप इस 'आकार' – charlietfl

उत्तर

8

तत्व एक आकार बदलने घटना प्रदर्शित नहीं होगा के साथ पृष्ठ, <img> ओ की तरह आर <div>। आपको यह घटना window से प्राप्त करनी होगी। चूंकि आपका इफ्रैमड दस्तावेज़ मूल दस्तावेज़ की एक ही उत्पत्ति से आता है, तो आप इसके contentWindow और किसी भी अन्य विशेषता को प्राप्त कर सकते हैं।

तो, यह प्रयास करें:

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

मैं इसे केवल डोम के addEventListener का उपयोग किया था।

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

से 2 साल बाद क्या उम्मीद करते हैं और अब हमारे पास ब्राउज़र में ऑब्जेर का आकार बदलना है जो आपको व्यक्तिगत रूप से आकार बदलने की घटनाओं को देखने की अनुमति देगा तत्व https://developers.google.com/web/updates/2016/10/resizeobserver – wesbos

संबंधित मुद्दे