topic Re: embedding storymap to website using <iframe> issue in ArcGIS StoryMaps Questions

embedding storymap to website using issue</h1> <p>AshwiniSuryawanshi — Tue, 19 May 2020 01:57:07 GMT</p> <HTML><HEAD></HEAD><BODY><P><STRONG>I am embedding storymap to website using <iframe> but my storymap's header is not displaying in iframe and also I am unable to execute client side script ( jquery/javascript function ) on iframe. Awaiting your response as I am not able to move further wit</STRONG></P><P></P><P>We have storymap with its header and footer. I need to embed it in our website. For this. I am using iframe.  I am facing below issues :</P><P>1. Storymap and other contents like maps, pages and footer is getting displayed in iframe <STRONG>except header</STRONG>.</P><P>2. Tried to execute <STRONG>jquery functions</STRONG> on iframe, like <STRONG>"scroll","click" etc but these events are not executing</STRONG>.  </P><P></P><P>I will appreciate your quick response as I am not able to move further with above issues. I tried everything I could from google. its been a week I am struggling with these issues. Awaiting for your reply</P></BODY></HTML> </article> <article> <h1>Re: embedding storymap to website using <iframe> issue</h1> <p>OwenGeo — Tue, 19 May 2020 13:05:09 GMT</p> <HTML><HEAD></HEAD><BODY><P>Hello Ashwini -- </P><P></P><P style="background-color: #ffffff; border: 0px;">1. Storymap and other contents like maps, pages and footer is getting displayed in iframe<SPAN> </SPAN><STRONG style="border: 0px; font-weight: bold;">except header</STRONG>.</P><P style="background-color: #ffffff; border: 0px;"></P><P style="background-color: #ffffff; border: 0px;">This is by design. Having a header on a story that is embedded in another web page can be confusing. The story cover will display the title, but the story relies on the parent page to provide a header, social sharing buttons, etc.</P><P style="background-color: #ffffff; border: 0px;"></P><P style="background-color: #ffffff; border: 0px;">2. Tried to execute<SPAN> </SPAN><STRONG style="border: 0px; font-weight: bold;">jquery functions</STRONG><SPAN> </SPAN>on iframe, like<SPAN> </SPAN><STRONG style="border: 0px; font-weight: bold;">"scroll","click" etc but these events are not executing</STRONG>.  </P><P style="background-color: #ffffff; border: 0px;"></P><P style="background-color: #ffffff; border: 0px;">This is expected behavior for iframes and is not a limitation of the story map. Please review the purpose and security limitations of iframes in your favorite web developer documentation, for example <A href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting">here</A>. Iframes to not permit access to DOM events of the embedded page unless they have the same origin. </P></BODY></HTML> </article> <article> <h1>Re: embedding storymap to website using <iframe> issue</h1> <p>AshwiniSuryawanshi — Tue, 19 May 2020 14:42:22 GMT</p> <HTML><HEAD></HEAD><BODY><P>Hi Owen,</P><P></P><P>Thank you for reply. </P><P>I got the second point and I can skip this. </P><P></P><P>Details for 1st point: </P><P><SPAN style="background-color: #ffffff;">Above like you said , ' <SPAN>The story cover will display the title, but the story relies on the parent page to provide a header, social sharing buttons, etc '. we have this as you said.</SPAN></SPAN></P><P><SPAN style="background-color: #ffffff;"><SPAN>We have a page with all this at  here : <A class="link-bare" href="https://storymaps.arcgis.com/stories/" title="https://storymaps.arcgis.com/stories/">https://storymaps.arcgis.com/stories/</A>somealphanumericvalues. (I mean,  this page have social sharing buttons and a small text etc.)</SPAN></SPAN></P><P><SPAN style="background-color: #ffffff;"><SPAN>Now, I have to embed this page in our website along with our office's header and footer. so in all,my html page is like below</SPAN></SPAN></P><P><SPAN style="background-color: #ffffff;"></SPAN></P><P><STRONG><EM><html></EM></STRONG></P><P><STRONG><EM><head></head></EM></STRONG></P><P><STRONG><EM><body></EM></STRONG></P><P><STRONG><EM><our header></EM></STRONG></P><P><STRONG><EM><iframe for embedding this page at <A href="https://storymaps.arcgis.com/stories/" style="color: #2989c5; background-color: #ffffff; text-decoration: none;" title="https://storymaps.arcgis.com/stories/">https://storymaps.arcgis.com/stories/</A><SPAN style="background-color: #ffffff;">somealphanumericvalues.></SPAN></EM></STRONG></P><P><STRONG><EM style="background-color: #ffffff; "><our footer></EM></STRONG></P><P><STRONG><EM style="background-color: #ffffff; "></body></EM></STRONG></P><P><STRONG><EM style="background-color: #ffffff; "></html></EM></STRONG></P><P></P><P></P><P>But when I run/open this page in browser, it shows our <EM><STRONG>header</STRONG> </EM>, <EM><STRONG>iframe with page at above location</STRONG></EM> and <STRONG><EM>footer</EM></STRONG>.</P><P>But <STRONG>iframe with page at above location </STRONG>is skipping the the part where we have those social sharing buttons and text.</P><P>I hope this clarifies the issue.</P><P>I am not familiar with storymaps but our office uses it and they have designed the page with storymap which i have to embed in our website.</P><P></P><P><SPAN style="background-color: #ffffff;"> </SPAN></P></BODY></HTML> </article> <article> <h1>Re: embedding storymap to website using <iframe> issue</h1> <p>AshwiniSuryawanshi — Tue, 19 May 2020 15:18:55 GMT</p> <HTML><HEAD></HEAD><BODY><P>And also when you say - ' <SPAN style="background-color: #ffffff;">The story cover will display the title, but the story relies on the <STRONG>parent page</STRONG> to provide a header, social sharing buttons, etc ' by this do you mean your parent page <STRONG>i.e. storymap page itself which I am embedding</STRONG> </SPAN></P><P><SPAN style="background-color: #ffffff;">OR</SPAN></P><P><STRONG style="background-color: #ffffff; ">My website page where I am embedding storymap page</STRONG></P><P><SPAN style="background-color: #ffffff;">I cannot attach the original images but I recreated the overall designing in microsoft pain, attaching the same for more clarification.</SPAN></P></BODY></HTML> </article> <article> <h1>Re: embedding storymap to website using <iframe> issue</h1> <p>AshwiniSuryawanshi — Wed, 20 May 2020 12:52:25 GMT</p> <HTML><HEAD></HEAD><BODY><P>Good morning Owen!</P><P></P><P>This answer is not completely correct. Please have a look at my other comment and question. Please clarify why story map' header is not getting embedded?</P><P>Awaiting for reply.</P></BODY></HTML> </article> <article> <h1>Re: embedding storymap to website using <iframe> issue</h1> <p>AshwiniSuryawanshi — Wed, 20 May 2020 13:07:56 GMT</p> <HTML><HEAD></HEAD><BODY><P><A href="https://community.esri.com/space/2246">ArcGIS StoryMaps</A>‌<A href="https://community.esri.com/group/1759">Esri Technical Support</A> <A href="https://community.esri.com/space/2230">Esri India</A>  I am requesting you guys please look into this issue and help me to understand the actual cause behind this.</P></BODY></HTML> </article> <article> <h1>Re: embedding storymap to website using <iframe> issue</h1> <p>OwenGeo — Wed, 20 May 2020 13:19:25 GMT</p> <HTML><HEAD></HEAD><BODY><P>Ashwini -- As mentioned in my response above, the header is not shown by design when a story is embedded. This is expected behavior.</P><P></P><P>We will monitor your request to see if others would like the header to be shown, but currently our product design is to always hide the header on stories when embedded.</P></BODY></HTML> </article> <article> <h1>Re: embedding storymap to website using <iframe> issue</h1> <p>AshwiniSuryawanshi — Wed, 20 May 2020 13:30:51 GMT</p> <HTML><HEAD></HEAD><BODY><P>Thank you so much Owen! Now I completely understood the whole situation. </P></BODY></HTML> </article> </main></body></html>