I have a custom Popup that displays an image using the sourceURL. I'd like the linkURL to fire some JavaScript code. The mediaInfos in the PopupTemplate looks like this: "mediaInfos": [ { "title": "", "type": "image", "caption": "", "value": { "sourceURL": "http://webapps-cdn.esri.com/Apps/MegaMenu/img/logo.jpg", "linkURL": "javascript:void(alert('Just fire an alert.'))" } } ] Unfortunately, in Firefox and IE, when the user clicks the image, a new web browser tab is opened and the javascript gets executed inside the new browser tab. This is not the case in Chrome. When you inspect the media element in the browser you see the anchor tag get constructed like this: a href = " javascript:void(alert( ' Just fire an alert. ' )) " target = " _blank " > img class = " esriPopupMediaImage " src = " http://webapps-cdn.esri.com/Apps/MegaMenu/img/logo.jpg " style =" margin-top : 53px ; " > a > Note that the tag includes the parameter target="_blank", which tells the the browser to open the href in a new browser. In Firebug, if I delete the target="_blank" parameter from the anchor tag, the Javascript executes inside the same browser window as the popup. This is the desired behavior. My question is: how can I get rid of that target="_blank" parameter? * In the PopupTemplate mediaInfos? If so, how? In the javascript:void? * Is there a global override of target="_blank"? TIA

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Executing JavaScript from Popup media linkURL

DirkVandervoort

I have a custom Popup that displays an image using the sourceURL. I'd like the linkURL to fire some JavaScript code. The mediaInfos in the PopupTemplate looks like this:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "mediaInfos": [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "title": "",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "type": "image",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "caption": "",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "value": {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "sourceURL": "http://webapps-cdn.esri.com/Apps/MegaMenu/img/logo.jpg",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "linkURL": "javascript:void(alert('Just fire an alert.'))"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Unfortunately, in Firefox and IE, when the user clicks the image, a new web browser tab is opened and the javascript gets executed inside the new browser tab. This is not the case in Chrome.

When you inspect the media element in the browser you see the anchor tag get constructed like this:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>a</SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>javascript:void(alert(<SPAN class="punctuation token">'</SPAN>Just fire an alert.<SPAN class="punctuation token">'</SPAN>))<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">target</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>_blank<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>img</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>esriPopupMediaImage<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwebapps-cdn.esri.com%2FApps%2FMegaMenu%2Fimg%2Flogo.jpg" target="_blank">http://webapps-cdn.esri.com/Apps/MegaMenu/img/logo.jpg</A><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">margin-top</SPAN><SPAN class="punctuation token">:</SPAN> 53px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>a</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Note that the <a/> tag includes the parameter target="_blank", which tells the the browser to open the href in a new browser.

In Firebug, if I delete the target="_blank" parameter from the anchor tag, the Javascript executes inside the same browser window as the popup. This is the desired behavior.

My question is: how can I get rid of that target="_blank" parameter?

In the PopupTemplate mediaInfos? If so, how? In the javascript:void?
Is there a global override of target="_blank"?

TIA

Find more posts tagged with

Accepted answers

FC_Basson

Find the element reference for the anchor link in the popup and set the target attribute to nothing when the popup opens:

link<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"target"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

All comments

LizDaRos

Any chance you can go into more detail where to add this line of code? I'm new to editing the WAB code and there are so many different files.

Thanks!

PanagiotisPapadopoulos54

Add an OnClick Event on this Image.

e.g

dojo.connect(statsLink2, "onclick", FunctionName);

FC_Basson

Find the element reference for the anchor link in the popup and set the target attribute to nothing when the popup opens:

link<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"target"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.