diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
| commit | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch) | |
| tree | d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/ar/web/api/history_api | |
| parent | 33058f2b292b3a581333bdfb21b8f671898c5060 (diff) | |
| download | translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip | |
initial commit
Diffstat (limited to 'files/ar/web/api/history_api')
| -rw-r--r-- | files/ar/web/api/history_api/index.html | 262 | ||||
| -rw-r--r-- | files/ar/web/api/history_api/مثال/index.html | 416 |
2 files changed, 678 insertions, 0 deletions
diff --git a/files/ar/web/api/history_api/index.html b/files/ar/web/api/history_api/index.html new file mode 100644 index 0000000000..0db39b3b98 --- /dev/null +++ b/files/ar/web/api/history_api/index.html @@ -0,0 +1,262 @@ +--- +title: Manipulating the browser history +slug: Web/API/History_API +tags: + - Advanced + - DOM + - HTML5 + - History + - NeedsTranslation + - TopicStub +translation_of: Web/API/History_API +--- +<p dir="rtl">با استفاده از آبجکت {{ domxref("window") }} می توانید به تاریخچه مرورگر توسط آبجت {{ domxref("window.history", "history") }} دسترسی داشته باشید . این آبجکت متد ها و ویژگی های بسیار کاربردی را در اختیار شما قرار میدهد تا بتوانید در تاریخچه مرورگر به عقب یا جلو بروید در واقع قادر خواهید بود تا عمل back و forward را انجام دهید</p> + +<h2 dir="rtl" id="مرور_در_تاریخچه_مرورگر">مرور در تاریخچه مرورگر</h2> + +<p dir="rtl">با استفاده از</p> + +<p>Moving backward and forward through the user's history is done using the <code>back()</code>, <code>forward()</code>, and <code>go()</code> methods.</p> + +<h3 id="Moving_forward_and_backward">Moving forward and backward</h3> + +<p>To move backward through history, just do:</p> + +<pre class="brush: js">window.history.back(); +</pre> + +<p>This will act exactly like the user clicked on the Back button in their browser toolbar.</p> + +<p>Similarly, you can move forward (as if the user clicked the Forward button), like this:</p> + +<pre class="brush: js">window.history.forward(); +</pre> + +<h3 id="Moving_to_a_specific_point_in_history">Moving to a specific point in history</h3> + +<p>You can use the <code>go()</code> method to load a specific page from session history, identified by its relative position to the current page (with the current page being, of course, relative index 0).</p> + +<p>To move back one page (the equivalent of calling <code>back()</code>):</p> + +<pre class="brush: js">window.history.go(-1); +</pre> + +<p>To move forward a page, just like calling <code>forward()</code>:</p> + +<pre class="brush: js">window.history.go(1); +</pre> + +<p>Similarly, you can move forward 2 pages by passing 2, and so forth.</p> + +<p>You can determine the number of pages in the history stack by looking at the value of the length property:</p> + +<pre class="brush: js">var numberOfEntries = window.history.length; +</pre> + +<div class="note"><strong>Note:</strong> Internet Explorer supports passing string URLs as a parameter to <code>go()</code>; this is non-standard and not supported by Gecko.</div> + +<h2 id="Adding_and_modifying_history_entries">Adding and modifying history entries</h2> + +<p>{{ gecko_minversion_header("2") }}</p> + +<p>HTML5 introduced the<a href="/en-US/docs/Web/API/History/pushState"> history.pushState()</a> and <a href="/en-US/docs/Web/API/History_API#The_replaceState()_method">history.replaceState()</a> methods, which allow you to add and modify history entries, respectively. These methods work in conjunction with the {{ domxref("window.onpopstate") }} event.</p> + +<p>Using <code>history.pushState()</code> changes the referrer that gets used in the HTTP header for <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a> objects created after you change the state. The referrer will be the URL of the document whose window is <code>this</code> at the time of creation of the <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a> object.</p> + +<h3 id="Example_of_pushState()_method">Example of pushState() method</h3> + +<p>Suppose <span class="nowiki">http://mozilla.org/foo.html</span> executes the following JavaScript:</p> + +<pre class="brush: js">var stateObj = { foo: "bar" }; +history.pushState(stateObj, "page 2", "bar.html"); +</pre> + +<p>This will cause the URL bar to display <span class="nowiki">http://mozilla.org/bar.html</span>, but won't cause the browser to load <code>bar.html</code> or even check that <code>bar.html</code> exists.</p> + +<p>Suppose now that the user now navigates to <span class="nowiki">http://google.com</span>, then clicks back. At this point, the URL bar will display <span class="nowiki">http://mozilla.org/bar.html</span>, and the page will get a <code>popstate</code> event whose <em>state object</em> contains a copy of <code>stateObj</code>. The page itself will look like <code>foo.html</code>, although the page might modify its contents during the <code>popstate</code> event.</p> + +<p>If we click back again, the URL will change to <span class="nowiki">http://mozilla.org/foo.html</span>, and the document will get another <code>popstate</code> event, this time with a null state object. Here too, going back doesn't change the document's contents from what they were in the previous step, although the document might update its contents manually upon receiving the <code>popstate</code> event.</p> + +<h3 id="The_pushState()_method">The pushState() method</h3> + +<p><code>pushState()</code> takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL. Let's examine each of these three parameters in more detail:</p> + +<ul> + <li> + <p><strong>state object</strong> — The state object is a JavaScript object which is associated with the new history entry created by <code>pushState()</code>. Whenever the user navigates to the new state, a <code>popstate</code> event is fired, and the <code>state</code> property of the event contains a copy of the history entry's state object.</p> + + <p>The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to <code>pushState()</code>, the method will throw an exception. If you need more space than this, you're encouraged to use <code>sessionStorage</code> and/or <code>localStorage</code>.</p> + </li> + <li> + <p><strong>title</strong> — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving.</p> + </li> + <li> + <p><strong>URL</strong> — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to <code>pushState()</code>, but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, <code>pushState()</code> will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.</p> + </li> +</ul> + +<div class="note"><strong>Note:</strong> In Gecko 2.0 {{ geckoRelease("2.0") }} through Gecko 5.0 {{ geckoRelease("5.0") }}, the passed object is serialized using JSON. Starting in Gecko 6.0 {{ geckoRelease("6.0") }}, the object is serialized using <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">the structured clone algorithm</a>. This allows a wider variety of objects to be safely passed.</div> + +<p>In a sense, calling <code>pushState()</code> is similar to setting <code>window.location = "#foo"</code>, in that both will also create and activate another history entry associated with the current document. But <code>pushState()</code> has a few advantages:</p> + +<ul> + <li>The new URL can be any URL in the same origin as the current URL. In contrast, setting <code>window.location</code> keeps you at the same {{ domxref("document") }} only if you modify only the hash.</li> + <li>You don't have to change the URL if you don't want to. In contrast, setting <code>window.location = "#foo";</code> only creates a new history entry if the current hash isn't <code>#foo</code>.</li> + <li>You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.</li> + <li>If <code>title </code>is subsequently used by browsers, this data can be utilized (independent of, say, the hash).</li> +</ul> + +<p>Note that <code>pushState()</code> never causes a <code>hashchange</code> event to be fired, even if the new URL differs from the old URL only in its hash.</p> + +<p>In a <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a> document, it creates the specified XUL element.</p> + +<p>In other documents, it creates an element with a <code>null</code> namespace URI.</p> + +<h3 id="The_replaceState()_method">The replaceState() method</h3> + +<p><code>history.replaceState()</code> operates exactly like <code>history.pushState()</code> except that <code>replaceState()</code> modifies the current history entry instead of creating a new one. Note that this doesn't prevent the creation of a new entry in the global browser history.</p> + +<p><code>replaceState()</code> is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.</p> + +<div class="note"><strong>Note:</strong> In Gecko 2.0 {{ geckoRelease("2.0") }} through Gecko 5.0 {{ geckoRelease("5.0") }}, the passed object is serialized using JSON. Starting in Gecko 6.0 {{ geckoRelease("6.0") }}, the object is serialized using <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">the structured clone algorithm</a>. This allows a wider variety of objects to be safely passed.</div> + +<h3 id="Example_of_replaceState()_method">Example of replaceState() method</h3> + +<p>Suppose <span class="nowiki">http://mozilla.org/foo.html</span> executes the following JavaScript:</p> + +<pre class="brush: js">var stateObj = { foo: "bar" }; +history.pushState(stateObj, "page 2", "bar.html"); +</pre> + +<p>The explanation of these two lines above can be found at "Example of pushState() method" section. Then suppose <span class="nowiki">http://mozilla.org/bar.html</span> executes the following JavaScript:</p> + +<pre class="brush: js">history.replaceState(stateObj, "page 3", "bar2.html"); +</pre> + +<p>This will cause the URL bar to display <span class="nowiki">http://mozilla.org/bar2.html</span>, but won't cause the browser to load <code>bar2.html</code> or even check that <code>bar2.html</code> exists.</p> + +<p>Suppose now that the user now navigates to <span class="nowiki">http://www.microsoft.com</span>, then clicks back. At this point, the URL bar will display <span class="nowiki">http://mozilla.org/bar2.html. If the user now clicks back again, the URL bar will display http://mozilla.org/foo.html, and totally bypass bar.html.</span></p> + +<h3 id="The_popstate_event">The popstate event</h3> + +<p>A <code>popstate</code> event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to <code>pushState</code> or affected by a call to <code>replaceState</code>, the <code>popstate</code> event's <code>state</code> property contains a copy of the history entry's state object.</p> + +<p>See {{ domxref("window.onpopstate") }} for sample usage.</p> + +<h3 id="Reading_the_current_state">Reading the current state</h3> + +<p>When your page loads, it might have a non-null state object. This can happen, for example, if the page sets a state object (using <code>pushState()</code> or <code>replaceState()</code>) and then the user restarts their browser. When your page reloads, the page will receive an <span style="font-family: courier new;">onload</span><span style="font-family: helvetica;"> event, but no <span style="font-family: courier new;">popstate</span> event.</span> However, if you read the <span style="font-family: courier new;">history.state</span> property, you'll get back the state object you would have gotten if a <span style="font-family: courier new;">popstate</span> had fired.</p> + +<p>You can read the state of the current history entry without waiting for a <code>popstate</code> event using the <code>history.state</code> property like this:</p> + +<pre class="brush: js">var currentState = history.state; +</pre> + +<h2 id="Examples">Examples</h2> + +<p>For a complete example of AJAX web site, please see: <a href="/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>replaceState, pushState</td> + <td>5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>11.50</td> + <td>5.0</td> + </tr> + <tr> + <td>history.state</td> + <td>18</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>11.50</td> + <td>6.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>replaceState, pushState</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>history.state</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p><strong style="font-size: 2.143rem; font-weight: 700; letter-spacing: -1px; line-height: 1;">See also</strong></p> + +<ul> + <li>{{ domxref("window.history") }}</li> + <li>{{ domxref("window.onpopstate") }}</li> +</ul> + +<p> </p> + +<p> </p> diff --git a/files/ar/web/api/history_api/مثال/index.html b/files/ar/web/api/history_api/مثال/index.html new file mode 100644 index 0000000000..1bcce72374 --- /dev/null +++ b/files/ar/web/api/history_api/مثال/index.html @@ -0,0 +1,416 @@ +--- +title: مثال تصفح آجاكس +slug: Web/API/History_API/مثال +translation_of: Web/API/History_API/Example +--- +<p dir="rtl">هذا مثال عن موقع واب يستعمل تقنية Ajax مُكَـوَّن فقط من ثلاث صفحات (<em>first_page.php</em>، <em>second_page.php </em> و <em>third_page.php</em>). لرؤية كيفية اشتغالها، رجاء، قم بصنع الملفات التالية (أو git clone <a href="https://github.com/giabao/mdn-ajax-nav-example" title="/en-US/docs/">https://github.com/giabao/mdn-ajax-nav-example.git</a>)</p> + +<div class="note" dir="rtl"><strong>ملاحظة</strong>: لدمج كامل لعناصر{{HTMLElement("form")}} ضمن هذه الآلية، رجاء ألق نظرة على فقرة <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">Submitting forms and uploading files</a>.</div> + +<p dir="rtl"><strong>first_page.php</strong>:</p> + +<div dir="rtl" style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: php"><?php + $page_title = "First page"; + + $as_json = false; + if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { + $as_json = true; + ob_start(); + } else { +?> +<!doctype html> +<html> +<head> +<?php + include "include/header.php"; + echo "<title>" . $page_title . "</title>"; +?> +</head> + +<body> + +<?php include "include/before_content.php"; ?> + +<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> + +<div id="ajax-content"> +<?php } ?> + + <p>This is the content of <strong>first_page.php</strong>.</p> + +<?php + if ($as_json) { + echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); + } else { +?> +</div> + +<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> + +<?php + include "include/after_content.php"; + echo "</body>\n</html>"; + } +?> +</pre> +</div> + +<p dir="rtl"><strong>second_page.php</strong>:</p> + +<div dir="rtl" style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: php"><?php + $page_title = "Second page"; + + $as_json = false; + if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { + $as_json = true; + ob_start(); + } else { +?> +<!doctype html> +<html> +<head> +<?php + include "include/header.php"; + echo "<title>" . $page_title . "</title>"; +?> +</head> + +<body> + +<?php include "include/before_content.php"; ?> + +<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> + +<div id="ajax-content"> +<?php } ?> + + <p>This is the content of <strong>second_page.php</strong>.</p> + +<?php + if ($as_json) { + echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); + } else { +?> +</div> + +<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> + +<?php + include "include/after_content.php"; + echo "</body>\n</html>"; + } +?> +</pre> +</div> + +<p dir="rtl"><strong>third_page.php</strong>:</p> + +<div dir="rtl" style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: php"><?php + $page_title = "Third page"; + $page_content = "<p>This is the content of <strong>third_page.php</strong>. This content is stored into a php variable.</p>"; + + if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { + echo json_encode(array("page" => $page_title, "content" => $page_content)); + } else { +?> +<!doctype html> +<html> +<head> +<?php + include "include/header.php"; + echo "<title>" . $page_title . "</title>"; +?> +</head> + +<body> + +<?php include "include/before_content.php"; ?> + +<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> + +<div id="ajax-content"> +<?php echo $page_content; ?> +</div> + +<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> + +<?php + include "include/after_content.php"; + echo "</body>\n</html>"; + } +?> +</pre> +</div> + +<p dir="rtl"><strong>css/style.css</strong>:</p> + +<pre class="brush: css" dir="rtl">#ajax-loader { + position: fixed; + display: table; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +#ajax-loader > div { + display: table-cell; + width: 100%; + height: 100%; + vertical-align: middle; + text-align: center; + background-color: #000000; + opacity: 0.65; +} +</pre> + +<p dir="rtl"><strong>include/after_content.php</strong>:</p> + +<pre class="brush: php" dir="rtl"><p>This is the footer. It is shared between all ajax pages.</p> +</pre> + +<p dir="rtl"><strong>include/before_content.php</strong>:</p> + +<pre class="brush: php" dir="rtl"><p> +[ <a class="ajax-nav" href="first_page.php">First example</a> +| <a class="ajax-nav" href="second_page.php">Second example</a> +| <a class="ajax-nav" href="third_page.php">Third example</a> +| <a class="ajax-nav" href="unexisting.php">Unexisting page</a> ] +</p> + +</pre> + +<p dir="rtl"><strong>include/header.php</strong>:</p> + +<pre class="brush: php" dir="rtl"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<script type="text/javascript" src="js/ajax_nav.js"></script> +<link rel="stylesheet" href="css/style.css" /> +</pre> + +<p dir="rtl"><strong>js/ajax_nav.js</strong>:</p> + +<p dir="rtl">(قبل تنفيذها في بيئة العمل، رجاءً اقرأ<strong> <a href="#const_compatibility" title="Note about *const* compatibility">the note about the const statement compatibility</a></strong>)</p> + +<div dir="rtl" style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: js" dir="rtl">"use strict"; + +const ajaxRequest = new (function () { + + function closeReq () { + oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); + bIsLoading = false; + } + + function abortReq () { + if (!bIsLoading) { return; } + oReq.abort(); + closeReq(); + } + + function ajaxError () { + alert("Unknown error."); + } + + function ajaxLoad () { + var vMsg, nStatus = this.status; + switch (nStatus) { + case 200: + vMsg = JSON.parse(this.responseText); + document.title = oPageInfo.title = vMsg.page; + document.getElementById(sTargetId).innerHTML = vMsg.content; + if (bUpdateURL) { + history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url); + bUpdateURL = false; + } + break; + default: + vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown"); + switch (Math.floor(nStatus / 100)) { + /* + case 1: + // Informational 1xx + console.log("Information code " + vMsg); + break; + case 2: + // Successful 2xx + console.log("Successful code " + vMsg); + break; + case 3: + // Redirection 3xx + console.log("Redirection code " + vMsg); + break; + */ + case 4: + /* Client Error 4xx */ + alert("Client Error #" + vMsg); + break; + case 5: + /* Server Error 5xx */ + alert("Server Error #" + vMsg); + break; + default: + /* Unknown status */ + ajaxError(); + } + } + closeReq(); + } + + function filterURL (sURL, sViewMode) { + return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, ""); + } + + function getPage (sPage) { + if (bIsLoading) { return; } + oReq = new XMLHttpRequest(); + bIsLoading = true; + oReq.onload = ajaxLoad; + oReq.onerror = ajaxError; + if (sPage) { oPageInfo.url = filterURL(sPage, null); } + oReq.open("get", filterURL(oPageInfo.url, "json"), true); + oReq.send(); + oLoadingBox.parentNode || document.body.appendChild(oLoadingBox); + } + + function requestPage (sURL) { + if (history.pushState) { + bUpdateURL = true; + getPage(sURL); + } else { + /* Ajax navigation is not supported */ + location.assign(sURL); + } + } + + function processLink () { + if (this.className === sAjaxClass) { + requestPage(this.href); + return false; + } + return true; + } + + function init () { + oPageInfo.title = document.title; + for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink); + } + + const + + /* customizable constants */ + sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav", + + /* not customizable constants */ + rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/, + oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(), + oPageInfo = { + title: null, + url: location.href + }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { + 100: "Continue", + 101: "Switching Protocols", + 102: "Processing", + 200: "OK", + 201: "Created", + 202: "Accepted", + 203: "Non-Authoritative Information", + 204: "No Content", + 205: "Reset Content", + 206: "Partial Content", + 207: "Multi-Status", + 208: "Already Reported", + 226: "IM Used", + 300: "Multiple Choices", + 301: "Moved Permanently", + 302: "Found", + 303: "See Other", + 304: "Not Modified", + 305: "Use Proxy", + 306: "Reserved", + 307: "Temporary Redirect", + 308: "Permanent Redirect", + 400: "Bad Request", + 401: "Unauthorized", + 402: "Payment Required", + 403: "Forbidden", + 404: "Not Found", + 405: "Method Not Allowed", + 406: "Not Acceptable", + 407: "Proxy Authentication Required", + 408: "Request Timeout", + 409: "Conflict", + 410: "Gone", + 411: "Length Required", + 412: "Precondition Failed", + 413: "Request Entity Too Large", + 414: "Request-URI Too Long", + 415: "Unsupported Media Type", + 416: "Requested Range Not Satisfiable", + 417: "Expectation Failed", + 422: "Unprocessable Entity", + 423: "Locked", + 424: "Failed Dependency", + 425: "Unassigned", + 426: "Upgrade Required", + 427: "Unassigned", + 428: "Precondition Required", + 429: "Too Many Requests", + 430: "Unassigned", + 431: "Request Header Fields Too Large", + 500: "Internal Server Error", + 501: "Not Implemented", + 502: "Bad Gateway", + 503: "Service Unavailable", + 504: "Gateway Timeout", + 505: "HTTP Version Not Supported", + 506: "Variant Also Negotiates (Experimental)", + 507: "Insufficient Storage", + 508: "Loop Detected", + 509: "Unassigned", + 510: "Not Extended", + 511: "Network Authentication Required" + }; + + var + + oReq, bIsLoading = false, bUpdateURL = false; + + oLoadingBox.id = "ajax-loader"; + oCover.onclick = abortReq; + oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; + oCover.appendChild(oLoadingImg); + oLoadingBox.appendChild(oCover); + + onpopstate = function (oEvent) { + bUpdateURL = false; + oPageInfo.title = oEvent.state.title; + oPageInfo.url = oEvent.state.url; + getPage(); + }; + + window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init); + + // Public methods + + this.open = requestPage; + this.stop = abortReq; + this.rebuildLinks = init; + +})(); + +</pre> +</div> + +<div class="note" dir="rtl"><strong>ملاحظة</strong>: التنفيذ الحالي لـ<a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> (تعليمة ثابتة) ليست جزءا من <strong>ECMAScript 5</strong>. هي مدعومة على متصفحات فايرفوكس وكروم (V8) ومدعومة جزئيا على أوبرا 9+ وسافاري. ليست مدعومة على <strong>Internet Explorer 6-9</strong>، ولا في معاينة <strong>Internet Explorer </strong>10. - ستكون معرفة في ECMAScript 6، لكن بدلالات أخرى. على غرار المتغيرات المعرفة (declared) بـتعليمة <a href="/en/JavaScript/Reference/Statements/let" title="en/JavaScript/Reference/Statements/let"><code>let</code></a> ، الثوابت المعرفة بـ<a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> ستكون. نقوم باستعمالها لغرض تعليمي. إذا كنت تريد توافقا كاملا مع المتصفح، رجاء قم باستبدال تعليمات <code><a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const">const</a> </code>بتعليمات <strong><a href="/en/JavaScript/Reference/Statements/var" title="en/JavaScript/Reference/Statements/var"><code>var</code></a></strong>.</div> + +<p dir="rtl">For more information, please see: <a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="/en-US/docs/DOM/Manipulating_the_browser_history">Manipulating the browser history</a>.</p> + +<h2 dir="rtl" id="See_also">See also</h2> + +<ul> + <li dir="rtl">{{ domxref("window.history") }}</li> + <li dir="rtl">{{ domxref("window.onpopstate") }}</li> +</ul> |