This time I will bring you jQuery Cross-domain operation of the DOM method in the iframe, jQuery cross-domain operation of the DOM method in the iframe. What are the precautions? The following is a practical case. Get up and take a look.
frame is still quite popular and is used in many places to implement special situations. For example, traditional<iframe src="a.php" id="aa"></iframe> <iframe src="b.php" id="bb"></iframe> <input type="button" id="read-aa" value="读取iframe #aa"> <input type="button" id="write-aa" value="写入iframe #aa">
$('#read-aa').click(function() { var v=$('#aa').contents().find('body').html(); alert(v); }); $('#write-aa').click(function() { $('#aa').contents().find('p').append('<hr>这是index.php操作aa.php写入的内容'); });
<!DOCTYPE html> <meta charset="utf-8"> <title>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</title> <script src="public/jQuery.js"></script> <script> $(function() { $('#read-parent-aa').click(function() { var v=$('body',parent.document).find('#aa').contents().find('body').html(); alert(v); }); $('#write-parent-aa').click(function() { $('body',parent.document).find('#aa').contents().find('p').append('<hr>这是bb.php操作aa.php写入的内容'); }); }); </script> <p>
</p> <input type="button" id="read-parent-aa" value="跨父读取iframe #aa"> <input type="button" id="write-parent-aa" value="跨父写入iframe #aa">
<!DOCTYPE html> <meta charset="utf-8"> <title>jQuery操作iframe</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <iframe src="a.php" id="aa"></iframe> <iframe src="b.php" id="bb"></iframe> <input type="button" id="read-aa" value="读取iframe #aa"> <input type="button" id="write-aa" value="写入iframe #aa"> <script> $(function() { $('#read-aa').click(function() { var v=$('#aa').contents().find('body').html(); alert(v); }); $('#write-aa').click(function() { $('#aa').contents().find('p').append('<hr>这是index.php操作aa.php写入的内容'); }); }); </script>
Other related articles!
Recommended reading:JSONP solves ajax cross-domain problem (with code)
php jquery implementation method of passing json data
The above is the detailed content of jQuery cross-domain operation DOM method in iframe. For more information, please follow other related articles on the PHP Chinese website!