קרדיט ל @חוקר נלקח מכאן
מתכנתים בשלבי פיתוח שרוצים לבצע הדמיות מתוך הדפדפן במחשב כמו הפעולות בטלפון היו צריכים להעתיק את הלינק לשורת הכתובת, ואז בכל פעם שיש תשובה read צריכים להעתיק את שם הערך לשורת הכתובת ולמלא בערך המבוקש וכו'.
הרבה פעמים זה יכול להיות ארוך ומסורבל.
יצרתי לעצמי כלי קליל לביצוע הדמיית שיחה ובכך לעקוב שהכל תקין.
מצ"ב הקוד HTML
ס"ה יש להכניס את הערכים ההתחלתיים, של הלינק, מספר מערכת, שלוחה וכו', ואז ללחוץ על שלח וזה יבצע את הבקשה ובאם בתשובה המתקבלת יש read זה יוסיף אוטומטי תיבת קלט להכניס את הערך המבוקש, ויציג לידו את תוכן ההודעה שמושמעת כעת, ובלחיצה על שליחה זה ישרשר אותו לשורת הכתובת ושוב יוסיף תיבת קלט וכו'.
באם אין פקודת read בתוצאה זה ידפיס את התוצאה המלאה למסך.
בנוסף יש לחצן מחיקה של שדה, באם ברצונכם למחוק ולשלוח נתון מחדש וכו'.
בנוסף כדי להקל על איפוס הטופס ומאידך לשמור על הלינק וכו' בצורה קבועה, עשיתי שניתן לכתוב ב URL את הנתונים הקבועים, ואז בריענון תמיד תוכלו להמשיך מיד בשליחת הפקודה לימות ללא הזנת הלינק מחדש.
בנוסף היות ואם ניגשים לתוכן שנמצא תחת דומיין אחר ולא הוגדר שם בהדרים "Access-Control-Allow-Origin: *" אז הדפדפן חוסם את הבקשה, לכן עשיתי גם קובץ PHP מעין פרוקסי קטן שהוא מבצע את הבקשה בצד השרת ומחזיר את מה שהתקבל, את הקובץ PHP יש להשים באותו דומיין של הHTML ואז לא תיהיה החסימה.
ניתן לסמן האם להשתמש בפרוקסי או לא.
תוכן הHTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>הרצת נסיונות API של ימות המשיח</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body dir="rtl">
<div id="myForm" >
<p><label for="url">הזן לינק </label><input dir="ltr" name="url" autofocus id="url" style="width:400px;" onkeydown="search(this)"/></p>
<p><label for="proxy">שימוש בפרוקסי</label><input type="checkbox" checked name="proxy" id="proxy"></p>
<p><label for="ApiPhone">הזן טלפון מחייג </label><input dir="ltr" name="ApiPhone" id="ApiPhone" onkeydown="search(this)"/></p>
<p><label for="ApiExtension">הזן שלוחה </label><input dir="ltr" name="ApiExtension" id="ApiExtension" onkeydown="search(this)"/></p>
<p><label for="ApiCallId">הזן מזהה שיחה </label><input dir="ltr" name="ApiCallId" id="ApiCallId" onkeydown="search(this)"/></p>
<p><label for="ApiDID">הזן מספר מערכת </label><input dir="ltr" name="ApiDID" id="ApiDID" onkeydown="search(this)"/></p>
<p><label for="ApiRealDID">הזן זיהוי שיחה </label><input dir="ltr" name="ApiRealDID" id="ApiRealDID" onkeydown="search(this)"/></p>
<div id="levels"></div>
<p><input type="button" value="שלח" onclick="submit();"></p>
</div>
<script language="JavaScript">
var ii = 1;
function search(ele) {
if(event.key === 'Enter') {
submit();
}
}
function del(ele) {
$( ele ).remove();
}
function submit(){
console.log('dsd');
// get all the inputs into an array.
var $inputs = $('#myForm :input');
console.log($inputs);
var data = {};
$inputs.each(function() {
if (this.name !== 'url' && this.name !== 'proxy' && this.name !== '') {
data[this.name] = $(this).val();
}
});
console.log(data);
// jQuery.support.cors = true;
var proxy = './proxyYm.php?url=';
if ($("#proxy").prop("checked") === false){
proxy = '';
}
$.ajax({
'url': proxy + $('#url').val(),
'type': 'POST',
'data': data
}).done(function( data ) {
var s1 = data.split('&');
var str = '<p>';
var focus = '';
var del = '';
for (var i in s1){
var s2 = s1[i].split('=');
if (s2[0] === 'read'){
var s3 = s2[2].split(',');
str += '<label for="' + s3[0] + '">' + s2[1] + ' </label><input dir="ltr" onkeydown="search(this)" name="' + s3[0] + '" id="' + s3[0] + '"/>';
console.log(s1, s2, s3);
focus = s3[0];
del = s3[0];
}else{
str += s1[i];
}
}
if (del === ''){
ii++;
}
let newDiv = (del !== '' ? del : ii);
$('#levels').append('<div id="div' + newDiv +'">' + str + ' <input type="button" value="מחק" tabindex="-1" onclick="del(\'#div' + newDiv +'\');"/></p>' + '</div>' + '\n');
if (focus !== ''){
$('#' + focus).focus();
}
$([document.documentElement, document.body]).animate({
scrollTop: $('#div' + newDiv).offset().top
}, 2000);
// alert("Success");
}).fail(function() {
$( "#levels" ).append( "This failed" );
});
return false;
}
/**
* @return {string}
*/
function GetURLParameter(sParam) {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return decodeURIComponent(sParameterName[1]);
}
}
return ''
}
function doc_keyUp(e) {
if (e.altKey && e.which === 65) {
submit();
}
}
document.addEventListener('keyup', doc_keyUp, false);
$(document).ready(function() {
var URLParameterArr = ['url', 'ApiPhone', 'ApiExtension', 'ApiCallId', 'ApiDID', 'ApiRealDID'];
for (var ui in URLParameterArr){
if (GetURLParameter(URLParameterArr[ui]) !== ''){
$( "#" + URLParameterArr[ui] ).val(GetURLParameter(URLParameterArr[ui]));
}
}
});
</script>
</body>
</html>
תוכן הPHP
<?php
header("Access-Control-Allow-Origin: *");
$postData = file_get_contents("php://input");
if ($postData){
$url = $_GET['url'];
$url = trim($url, '?');
print file_get_contents($url . '?' . $postData);
}else{
print 'not contents';
}
שם הקובץ php
proxyYm.php
דוגמה ל URL שתמלא את הערכים הקבועים
http://localhost/ymTest.html?url=http://127.0.0.1/api/ivr/Menu&ApiPhone=0527123456&ApiCallId=2dcd9d83c0e6f10e8cf8c82866541985d57fb434&ApiDID=033080222&ApiExtension=1