Javascript onclick method in ArcGIS iframe is disappearing - javascript

I'm using ESRI's ArcGIS Web App to create a map that has several interactive features. By clicking on specific objects in my map, users will see a pop up (created using the Web App creation features) with information about the area they clicked on.
Some of those pop ups contain a link that should open up a new window to display an image (that I have hosted on my web server).
Here's where my problem begins. In the map builder, inside my ArcGIS online login where I set everything up, I have added the link control to the configured popups that tells it to use Javascript in an "onclick" to tell it to open a new window, of a specific size, and where to find the image to display. It all works fine in the builder. But as soon as I create the web app, it completely drops my "onclick".
And more-so, I tried to work around this by changing the href of the link to "javascript:myScriptHereTellingItToOpenANewWindow" and the web app then drops the "javascript:" part and changes it to "#" thus still not working when I click it, all it does is try to open a new browser tab and ignores the rest of the script written in the href.
I'm sorry I have to be somewhat vague because this is for a company project that has high security. Below is what little code I can share (cleaned up a little to hide confidential information).
In the ArcGIS Web Map builder, here is the code I have in my configured popup:
<a onclick="window.open('URL of image file I want to load','width=1000,height=202,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,copyhistory=no,resizable=yes');" style="cursor:pointer;" target="_parent">View Featured Line</a>
And as I said, that works fine in the editor. But once I chose to "Create a Web App from this map" it drops the "onclick" completely.
If I put it in the href tag, like below:
View Featured Line
Then when I "inspect source" in the web app, it looks like this (which doesn't work either):
View Featured Line

Related

Prevent link change after click (third party plugin is altering my link)

I'm using a map embed software and have embedded the code in to my WP site (elementor pro). I'm having an issue with the link url changing on click, I'm sure it has something to do with their software. Here's the best I can explain it:
I want users to be able to click the "directions" button that loads under the map marker, and have it open on apple maps because they will redirect to google maps if user is not on iOS device - google maps links have no such function from what I can tell. This service (storepoint), by default opens everything in google maps.
I figured it would be an easy fix and I updated my "address" in the storepoint software to be -- http://maps.apple.com/?daddr=6619+West+Cross+Creek+Bend+Lane,+Fulshear+Tx -- and it seemed to have worked (in their software it correctly pinned that location on the preview map), however when I refreshed my website the button link showed up as https://www.google.com/maps/dir//%3Ca%20href%3D%22javascript%3A%3B%22%3Ehttp%3A%2F%2Fmaps.apple.com%2F%3Fdaddr%3D6619%2BWest%2BCross%2BCreek%2BBend%2BLane%2C%2BFulshear%2BTx%3C%2Fa%3E -- so basically they just added the google maps url infront of my apple maps url rendering both map links completely useless.
Somehow my link is magically changing. I'm wondering if I can use the button id and do something with JS to prevent this. I have no idea though.
If anyone comprehends my rambling and has a work around I would appreciate it.

How to open a browser app which is listed in chrome://apps

Chromium-based browser has the apps page at chrome://apps
There are some apps that I have installed into it. Is it able to launch one of them from JavaScript somewhat just like opening file selecting box?
I can open chrome://apps by setting this URL in to a link, but how about a single app?
Copied from: Open Chrome in a new window (Chrome app)
Sadly, there's no way to do that I know of.
Using window.open in an app's context is a bit of a hack, but results in the URL being open in the user's default browser (not necessarily Chrome). There's no control as to how the browser chooses to open it.
There's a Chrome App-specific API that was created specifically with "open a page in Chrome" in mind, chrome.browser. However, it still doesn't provide an option to open in a new window.
The closest you can get is to create your own "browser": an app window with an in it. Then you have full control over the presentation, but it's not integrated with Chrome's profile and may require additional work to implement things like dialogs and browser controls. See the Browser sample app and documentation.
You may need the app id which you can then append to the URL. I am not entirely sure how you would find but if you go to the apps page on chrome, drag the icon of the app to the search bar in the browser, you should get the full link.
For instance, I dragged the Google Slides Icon onto the search bar and it gave me this url chrome-extension://aapocclcgogkmnckokdopfmhonfmgoek/main.html. So, you may give it a shot! Try to open the chrome apps page, then drag the app you want to open in new tab onto the search bar.
Hence, using Javascript:
window.open("chrome-extension://aapocclcgogkmnckokdopfmhonfmgoek/main.html", "_blank");
Opens Google Slides App in a new tab.

How to integrate a custom Screen Capture App inside my HTML Page?

I am trying to integrate a screenshot tool or a Snipping tool kind of application inside a HTML page that I developed.
Basically the app should allow me to snipe a part of my current webpage and save it in picture format. Or it can even capture the entire page also. Anything works.
For the record, the content of my webpage contains an iframe whose source is - https://www.mathxl.com/info/exercise.aspx?fromask=yes&dataid=f919d33b-99fd-4fb5-90a8-a8a4c9894795
The Screen Capture Application should capture the dynamic contents that I insert inside the loaded iframe flash content as well.
Any kind of suggestions or information about a 3rd Party API (even paid version works) would be helpful.
PS - I tried HTML2Canvas.js, it didn't work.

Javascript Grab URL and insert into Pinterest button for Facebook Page Tab App

I am trying to add a Pinterest button onto a product page for a single image in a Facebook Tab app.
The Pinterest code is grabbed from their goodies section, and must include a URL, the Media URL and the Description.
I am not that proficient with Javascript. I am trying to pull the URL and insert into the Javascript button for a single item. Please see below; Thanks.
Pin It
Since you trying to get Pinterest button working in Facebook Page tab this will not work due to inability to know which Page you're on in JavaScript.
This info is passed to server with signed_request. You have couple of options to do so:
Build the link to page that will be linked to "Pin" server-side
Pass information about Page and Page Tab to client side and build the link here.
Beware that this is just a link and it will not looks like Pin-It button until you including Pinterest JavaScript (//assets.pinterest.com/js/pinit.js) on a page. If you build that link in Client Side you must include that JavaScript after, so link will be replaced by iframe with actual Pin-It button.

How to translate entire website with Google Translate

I am currently using the following to translate a web page:
http://translate.google.com/about/intl/en_ALL/tour.html#professional
The problem is, when I put the code snippet generated on the Google site onto my web pages, the user has to choose their language on each page in the website. Is there any way to do it so that the user only chooses once and then every subsequent page they visit in my website gets automatically translated to their chosen language?
It appears this problem only shows up when using Google Chrome. Other browsers work fine:
http://groups.google.com/group/google-translate-general/browse_thread/thread/4b48a4f997762692
The translation widget at the bottom of this page takes the approach of redirecting to google's page translation service which maintains the language but your page has to run inside a google container:
http://www.toronto.ca/
You might be able to listen to change events on the in-page translation widget and store the selected language in LocalStorage so you can automatically reselect it whenever a new page is loaded. However, this approach is pretty hacky since it could easily break whenever google alters the widget.

Categories