{"id":73,"date":"2020-05-12T08:35:56","date_gmt":"2020-05-12T06:35:56","guid":{"rendered":"http:\/\/wiki.hogs.live\/?page_id=73"},"modified":"2020-06-23T11:22:54","modified_gmt":"2020-06-23T09:22:54","slug":"dokumentacja-iframea","status":"publish","type":"page","link":"https:\/\/wiki.hogs.live\/en\/dokumentacja-iframea\/","title":{"rendered":"Iframe documentation"},"content":{"rendered":"<p class=\"post-6 translation-block\">HOGS maps can be implemented on any page by using the HTML iframe tag. Provide the <a href=\"https:\/\/iframe.hogs.live\/\" target=\"_self\">https:\/\/iframe.hogs.live<\/a> as source.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><code>&lt;iframe src=\"https:\/\/iframe.hogs.live\"&gt;&lt;\/iframe&gt;<\/code><\/p><\/blockquote>\n\n\n\n<h4 class=\"post-6\">Main parameters<\/h4>\n\n\n\n<p class=\"post-6 translation-block\">Use GET method to send parameters to the iframe. Authentication token known as <strong>authToken<\/strong> is the most important parameter that allows the use of the iframe. The token can be aquired by loging in via API: <a href=\"http:\/\/wiki.hogs.live\/en\/autoryzacja-2\/\" target=\"_self\">http:\/\/wiki.hogs.live\/autoryzacja-2\/<\/a><\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p> <code>&lt;iframe src=\"https:\/\/iframe.hogs.live?authToken=&lt;authToken&gt;\"&gt;&lt;\/iframe&gt; <\/code><\/p><\/blockquote>\n\n\n\n<p class=\" translation-block\"><strong>Mode<\/strong> parameter defines the mode in which iframe can be started i.e. what functions are offered, ex. <strong>mode= calculateRoute<\/strong> means route plotting mode. <strong>Options<\/strong> ia a supplementary mode that contains all information needed to aquired specified behaviour ex. parameters characteristic for route.<\/p>\n\n\n\n<p class=\"post-6 translation-block\">Main parameters documentation link: <a href=\"http:\/\/wiki.hogs.live\/en\/parametry-glowne\/\" target=\"_self\">parameters-main<\/a><\/p>\n\n\n\n<h3>Iframe modes:<\/h3>\n\n\n\n<ul class=\"post-6\"><li><a href=\"https:\/\/wiki.hogs.live\/en\/wyznaczanie-trasy-2\/\">calculateRoute<\/a><\/li><\/ul>\n\n\n\n<h3>Communication- events<\/h3>\n\n\n\n<p>There is a possibility to send information without reloading the iframe. In the same way you can receive information from the iframe.<\/p>\n\n\n\n<p>Sending event:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>\n<code>\n&lt;body&gt;\n<br>\n&nbsp;&lt;iframe id=\"iframe\" src=\"https:\/\/iframe.hogs.live\/\"&gt;&lt;\/iframe&gt;\n<br>\n&lt;\/body&gt;\n<br>\n&lt;script&gt;\n<br>\n&nbsp;const iframe = document.getElementById('iframe');\n<br>\n&nbsp;function sendEventToIframe(data) {\n<br>\n&nbsp;&nbsp;iframe.contentWindow.postMessage(data, '*');\n<br>\n&nbsp;}\n<br>\n\n&nbsp;sendEventToIframe('sth');\n<br>\n&lt;\/script&gt;\n<\/code>\n<\/p><\/blockquote>\n\n\n\n<p>Receiving event<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><code>\nwindow.addEventListener('message', (event) =&gt; {\n<br>\n&nbsp;&nbsp;console.log('Dane z iframe: ', event.data);\n<br>\n});\n<\/code><\/p><\/blockquote>\n\n\n\n<p>Event model<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>\n<code>\n<em>interface<\/em>&nbsp;Event&nbsp;{<br>&nbsp;&nbsp;type:&nbsp;string;<br>&nbsp;&nbsp;data:&nbsp;<em>any<\/em>;<br>} \n<\/code><\/p><\/blockquote>\n\n\n\n<p class=\" translation-block\">While sending <strong>event<\/strong> to the iframe the <strong>type<\/strong> setting assumes the value of <strong>mode<\/strong> parameter (main parameters, sent by GET, map mode), <strong>data<\/strong> assumes <strong>options<\/strong> value.<\/p>\n\n\n\n<h3 class=\"post-6 translation-block\">Documentaton: <a href=\"http:\/\/wiki.hogs.live\/en\/eventy\/\" target=\"_self\">Events<\/a><\/h3>","protected":false},"excerpt":{"rendered":"<p>Mapy HOGS mog\u0105 zosta\u0107 zaimplementowane na dowolnej stronie poprzez wykorzystanie znacznika HTML iframe. Adres, kt\u00f3ry nale\u017cy poda\u0107 jako \u017ar\u00f3d\u0142o, to https:\/\/iframe.hogs.live . &lt;iframe src=&#8221;https:\/\/iframe.hogs.live&#8221;&gt;&lt;\/iframe&gt; Parametry g\u0142\u00f3wne W celu przekazania informacji do iframe&#8217;a nale\u017cy przekaza\u0107 parametry za pomoc\u0105 metody GET. Najwa\u017cniejszym parametrem pozwalaj\u0105cym na korzystanie z iframe&#8217;a jest authToken, czyli token uwierzytelniaj\u0105cy. Token nale\u017cy uzyska\u0107 w ..<\/p>\n<div class=\"clear-fix\"><\/div>\n<p><a href=\"https:\/\/wiki.hogs.live\/en\/dokumentacja-iframea\/\" title=\"read more...\">Read more<\/a><\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/wiki.hogs.live\/en\/wp-json\/wp\/v2\/pages\/73"}],"collection":[{"href":"https:\/\/wiki.hogs.live\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wiki.hogs.live\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.hogs.live\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.hogs.live\/en\/wp-json\/wp\/v2\/comments?post=73"}],"version-history":[{"count":15,"href":"https:\/\/wiki.hogs.live\/en\/wp-json\/wp\/v2\/pages\/73\/revisions"}],"predecessor-version":[{"id":202,"href":"https:\/\/wiki.hogs.live\/en\/wp-json\/wp\/v2\/pages\/73\/revisions\/202"}],"wp:attachment":[{"href":"https:\/\/wiki.hogs.live\/en\/wp-json\/wp\/v2\/media?parent=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}