AJAX学习笔记

在用IFrame做Ajax时，需要考虑的有：

1. 先定义隐藏的IFrame

<iframe name="myIframe" src="blank.html" style="width:0px;height:0px" frameborder="0">
</iframe>
2. 通过button,Href或者form提交，动态修改IFrame的src属性或者设置Href,Form的Target属性

 

3. 如何在父窗口和IFrame页面传递数据

 

     Three ways of Moving Data From an iframe to the Parent

 

3.1 The iframe page can use it's own javascripts to transfer and place the data into the parent.

 

 

     

<script>

 // - this is the script in the iframe results page 
var reps = document.getElementById('state_reps').innerHTML; parent.document.getElementById('results1').innerHTML = reps; 

</script> 

 

 

3.2 The iframe page can pass its document object as an argument to a function in the parent, thereby allowing the parent to retrieve data from the iframe.

 

  

 

<script> 
// - this is the script in parent page 
function showReps(doc){ 
var x = doc.getElementById('state_reps').innerHTML; document.getElementById('results2').innerHTML = x; 
} 
</script> 

 

 

3.3 Place an onload event handler in the iframe tag in the parent document (this page). This method does not work with Netscape 6.

 

<iframe name="repIframe3" src="blank.html" onload="getIframeDoc()"></iframe> 

<script> 
function getIframeDoc(){ 
var iframeDoc = window.frames['repIframe3'].document; 
var sr = iframeDoc.getElementById('state_reps'); 
if (sr){ 
var reps3 = sr.innerHTML; 
document.getElementById('results3').innerHTML = reps3; 
} 
} 
</script> 

 

 

<script> 
// - this is the script in the iframe results page 
parent.showReps(document); 
</script>