السلام عليكم ورحمة الله وبركاتة
نكمل مسيرتنا في دورة الاجاكس وبدأناها في معرفة
الـHidden frame وطرق ارسال المعلومات وكانت Get , Post
والان ننتقل الى Hidden iFrames
بدأ ظهور خاصية الـiFrame مع ظهور تقنية الـ HTML 4.0 وهي لا تختلف اختلافا
كبيرا عن Frame الا في بعض الميزات ستعرف الفروقات من خلال التجربه,
بدايةً هناك طريقتين للأستفادة من الـiFrame والطريقة الاسهل هو وضع الـiFrame
بداخل الصفحة واستخدامه بطريقة hiddenframe لعمل الطلبات ولعمل ذلك
قم بكتابة هذا الكود:
كود PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Hidden IFrame Example 1</title>
<script type="text/javascript">
function requestCustomerInfo() {
var sId = document.getElementById("txtCustomerId").value;
top.frames["hiddenFrame"].location = "GetCustomerData.php?id=" + sId;
}
function displayCustomerInfo(sText) {
var divCustomerInfo = document.getElementById("divCustomerInfo");
divCustomerInfo.innerHTML = sText;
}
</script>
</head>
<body>
<p>Enter customer ID number to retrieve information:</p>
<p>Customer ID: <input type="text" id="txtCustomerId" value="" /></p>
<p><input type="button" value="Get Customer Info" onclick="requestCustomerInfo()" /></p>
<div id="divCustomerInfo"></div>
<iframe src="about:blank" name="hiddenFrame" width="0" height="0" frameborder="0"></iframe>
</body>
</html>
وبالصفحة GetCustomerData.php يوجد تعديل بسيط
كود PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Get Customer Data</title>
<?php
//customer ID
$sID = $_GET["id"];
//variable to hold customer info
$sInfo = "";
//database information
$sDBServer = "your.databaser.server";
$sDBName = "your_db_name";
$sDBUsername = "your_db_username";
$sDBPassword = "your_db_password";
//create the SQL query string
$sQuery = "Select * from Customers where CustomerId=".$sID;
//make the database connection
$oLink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
@mysql_select_db($sDBName) or $sInfo = "Unable to open database";
if($sInfo == '') {
if($oResult = mysql_query($sQuery) and mysql_num_rows($oResult) > 0) {
$aValues = mysql_fetch_array($oResult,MYSQL_ASSOC);
$sInfo = $aValues['Name']."<br />".$aValues['Address']."<br />".
$aValues['City']."<br />".$aValues['State']."<br />".
$aValues['Zip']."<br /><br />Phone: ".$aValues['Phone']."<br />".
"<a href=\"mailto:".$aValues['E-mail']."\">".$aValues['E-mail']."</a>";
} else {
$sInfo = "Customer with ID $sID doesn't exist.";
}
}
mysql_close($oLink);
?>
<script type="text/javascript">
window.onload = function () {
var divInfoToReturn = document.getElementById("divInfoToReturn");
parent.displayCustomerInfo(divInfoToReturn.innerHTML);
};
</script>
</head>
<body>
<div id="divInfoToReturn"><?php echo $sInfo ?></div>
</body>
</html>
هذا المثال سيعمل كما لو كان المثال في الدرس الثاني او الاول
اما الطريقة الاخرى لأستخدام ال hidden iFrames هي بأنشائهم بطريقة دايناميكية بأستخدام
الجافا سكريبت ,,
الخطوه الاولى لأنشاء الـiFrame هي بأستخدام الدالة document.createElement()
بالشكل التالي :
كود PHP:
function createIFrame() {
var oIFrameElement = document.createElement("iframe");
oIFrameElement.width=0;
oIFrameElement.height=0;
oIFrameElement.frameBorder=0;
oIFrameElement.name = "hiddenFrame";
oIFrameElement.id = "hiddenFrame";
document.body.appendChild(oIFrameElement);
//more code
}
السطر الاخير من هذا الكود هو الاهم بين هذه الاسطر والسبب بأن عمله هو ان يقوم
بأضافة ال iFrame الى بنية الملف .
لاحظ بأن id و name قمنا بكتابتهم بدون اختلاف والسبب بأن بعض المتصفحات تقوم
بالولوج الى الـframe بأستخدام الNAME والبعض الاخر بأستخدام الـ ID.
ومن ثم قم بتعريف متغير لتخزين المرجعات من Iframe
انظر للكود مره اخرى الان :
كود PHP:
var oIFrame = null;
function createIFrame() {
var oIFrameElement = document.createElement("iframe");
oIFrameElement.width=0;
oIFrameElement.height=0;
oIFrameElement.frameBorder=0;
oIFrameElement.name = "hiddenFrame";
oIFrameElement.id = "hiddenFrame";
document.body.appendChild(oIFrameElement);
oIFrame = frames["hiddenFrame"];
}
وهذه التعديلات على الدوال الموجوده في ملف العرض للمعلومات
السابق اي في بداية الدرس مكانة
كود PHP:
function requestCustomerInfo() {
if (!oIFrame) {
createIFrame();
setTimeout(requestCustomerInfo, 10);
return;
}
var sId = document.getElementById("txtCustomerId").value;
oIFrame.location = "GetCustomerData.php?id=" + sId;
}
function displayCustomerInfo(sText) {
var divCustomerInfo = document.getElementById("divCustomerInfo");
divCustomerInfo.innerHTML = sText;
}
قم بتجربة الكود بالاضافة الى الاكواد الموجوده في الدرس الاول او بالاحرى الصفحات صفحات الحفظ
والعرض ,,,
هذه الاكواد بالنسبة للـGET اما بالنسبة للـPOST فهي قصة ثانية ,,
طلبات الاطر المخفية بأستخدام طريقة POST :
لأستخدام الطريقة الصحيحة في POST بالنسبة للـiframe علينا ان نقوم بتحميل الصفحة
بداخل الاطار المخفي ونعبئ هذا الفورم بالبيانات ومن ثم نقوم بأرسال البيانات ,
عندما يقوم الاطار الظاهر امامك بالاستقبال البيانات عليك بأيقاف العملية وارسالها الى الاطار المخفي
لعمل ذلك علينا ان نقوم بأنشاء دالة لأنشاء الـ iFrame ومن ثم تحميل الاطار المخفي:
كود PHP:
function checkIFrame() {
if (!oIFrame) {
createIFrame();
}
setTimeout(function () {
oIFrame.location = "ProxyForm.htm";
}, 10);
}
بالبداية تقوم هذه الدالة بالتأكد اذا ما كان قد تم انشاء الـ IFrame واذا لم يكن قد تم انشاءه
سيتم استدعاء الدالة createIFrame ومن ثم الدالة timeout ستقوم بأستدعاء الصفحة ProxyForm
التي هي صفحة بأطار مخفي , والسبب بأنه من الضروري ان نقوم بأستدعاء هذه الدالة في
كل مره يقوم الزائر او المستخدم بالأرسال المعلومات عن طريق الزر الخاص بذلك.
الصفحة ProxyForm.htm بسيطة جدا فتحتوي على كود بسيط من الجافا سكريبت :
كود PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Proxy Form</title>
<script type="text/javascript">
window.onload = function () {
parent.formReady();
}
</script>
</head>
<body>
<form method="post">
</form>
</body>
</html>
كما ترى البدي الخاص بالصفحة يحتوي على فورم فارغ والهيدر يحتوي على دالة onload
وعندما تستدعى الصفحة يتم استدعاء parent.formReady() لتجعل الصفحة الرئيسية
على علم بأنها قادرة على استقبال الطلب ,,
الدالة formReady سنضعها في الصفحة الرئيسية :
كود PHP:
function formReady() {
var oHiddenForm = oIFrame.document.forms[0];
var oForm = document.forms[0];
for (var i=0 ; i < oForm.elements.length; i++) {
var oHidden = oIFrame.document.createElement("input");
oHidden.type = "hidden";
oHidden.name = oForm.elements[i].name;
oHidden.value = oForm.elements[i].value;
oHiddenForm.appendChild(oHidden);
}
oHiddenForm.action = oForm.action;
oHiddenForm.submit();
};
والذي تبقى لدينا الان هو التأكد بأن الصفحة الرئيسية لن تقوم بأستدعاء نفسها , والطريقة لذلك
هو بجعل قيمة onsubmit الذي بدورة يستدعي الدالة checkIFrame تساوي False
كود PHP:
<form method="post" action="SaveCustomer.php" onsubmit="checkIFrame(); return false">
وبالمرفق الملفات كاملة لتقوم بتجربتها بنفسك والتحقق من النتائج ^^
اتمنى ان اكون قد وفقت في طرح هذه التقنية
امنياتي لكم بالتوفيق اخوكم محمد ^^
المصدر