topic Re: Use iframe to show webpage image in popup in ArcGIS Online Questions

Use iframe to show webpage image in popup

BrandonPrice — Fri, 22 Dec 2017 19:58:12 GMT

Is it possible to use <iframe src="www.google.com"></iframe> to show webpage images in an arcgis online popup?

Brandon

https://community.esri.com/community/gis/web-gis/web-appbuilder?sr=search&searchId=506a9f1c-8a7b-40ca-a5f7-812b9df2db1e&searchIndex=1‌

Re: Use iframe to show webpage image in popup

XanderBakker — Fri, 22 Dec 2017 20:12:37 GMT

I would say no. Here is a list of supported HTML in a pop-up: Supported HTML—ArcGIS Online Help | ArcGIS or you would have to code it using https://community.esri.com/groups/web-app-builder-custom-widgets?sr=search&searchId=37e1a1d7-4b3f-43fc-aecc-03157fa15e84&searchIndex=1‌

Re: Use iframe to show webpage image in popup

RobertScheitlin__GISP — Fri, 22 Dec 2017 20:36:47 GMT

I was able to add an iFrame to a popup in a JS API Sample in the sandbox so it should be possible in WAB as well:

(a google maps url was used).

Re: Use iframe to show webpage image in popup

BrandonPrice — Sat, 23 Dec 2017 00:17:11 GMT

Thanks Robert. I will try this later and will be sure to mark correct after.

Brandon

Re: Use iframe to show webpage image in popup

BrandonPrice — Sat, 23 Dec 2017 00:49:59 GMT

This is great. This works just fine. Only for https it seems.

Re: Use iframe to show webpage image in popup

RobertScheitlin__GISP — Sat, 23 Dec 2017 00:51:45 GMT

Is you app using https protocol?

Re: Use iframe to show webpage image in popup

BrandonPrice — Sun, 24 Dec 2017 18:29:05 GMT

I think so. It is a story map. I will double check again but I tried https which worked but I couldn't get http to work.

Re: Use iframe to show webpage image in popup

BrandonPrice — Sun, 24 Dec 2017 18:43:40 GMT

but it actually doesn't work using the sandbox either. It might not have to do with the app but esri popups overall

Re: Use iframe to show webpage image in popup

RobertScheitlin__GISP — Sun, 24 Dec 2017 19:01:00 GMT

Brandon,

In today’s browsers security you will not be able to have a website in an iFrame unless the site is from the same source or has a X-Frame-Options in the header that allows the site to show in an iFrame. You can Google about this.

Re: Use iframe to show webpage image in popup

BrandonPrice — Tue, 26 Dec 2017 16:03:12 GMT

Hi Robert,

Thanks for the info. I read up on what you were saying and found the online articles helpful. I could not find anything about the iframe being from the same source. Are you saying if your site is http you can use a http iframe but not a https iframe? I believe ESRI has their apps designed to run on https only. If this is correct, can't this be changed?

Re: Use iframe to show webpage image in popup

BrandonPrice — Tue, 26 Dec 2017 18:56:32 GMT

Hi Robert,

Do you also know if esri popups are only associated with layers or could one be created from a button onclick with custom contents?

something like:

var downloadbutton = document.getElementById('Download');
$(function() {
$("#esripopup").dialog({
autoOpen: false
});
$("#Download").on("click", function() {
$("#popup").dialog("open");
});

});

Brandon

Re: Use iframe to show webpage image in popup

RobertScheitlin__GISP — Tue, 26 Dec 2017 20:41:27 GMT

Brandon,

You can use a pop up for anything you want (just know that the map can only have one pop up showing at a time). From what ever your code is or called from, just do map.infoWindow.show.

Re: Use iframe to show webpage image in popup

BrandonPrice — Wed, 27 Dec 2017 23:06:17 GMT

Hi Robert,

I still have not been able to get the iframe to show via an esri popup. This what I have so far:

var downloadBtn1 = dom.byId("Download");
on(downloadBtn1, "click", function (event) {
app.map.infoWindow.setTitle("Download");
app.map.infoWindow.setContent(
<iframe width="600" height="490" src="https://egis3.lacounty.gov/dataportal/2013/11/07/los-angeles-county-sanitary-sewers)" style="margin-left: -268px; margin-top: -326px;"></iframe>
);
app.map.infoWindow.show();
}
});

Does this look right at a glance?

Re: Use iframe to show webpage image in popup

BrandonPrice — Wed, 27 Dec 2017 23:08:48 GMT

Or is an infotemplate/popuptemplate more appropriate?

Re: Use iframe to show webpage image in popup

RobertScheitlin__GISP — Wed, 27 Dec 2017 23:18:19 GMT

You should give the show method a map point to set where the pop up is tied to. Also I have not checked but does your web page you are attempting to open in the iFrame have an x-frame-options in the header response like your Google of x-frame-options should have told you about?

Re: Use iframe to show webpage image in popup

BrandonPrice — Wed, 27 Dec 2017 23:35:39 GMT

I don't think so. I right clicked on the header and went to inspect. Then I went to console where it said top and couldn't find any x frame option.

Brandon

Re: Use iframe to show webpage image in popup

RobertScheitlin__GISP — Thu, 28 Dec 2017 00:00:27 GMT

Which is not good...

Re: Use iframe to show webpage image in popup

RobertScheitlin__GISP — Thu, 28 Dec 2017 01:16:27 GMT

You are just not going to get this to work without using the same origin the app has to be the same beginning url as the iFrame. I.e. I can get http://gislap183/js/popupiframe.html to work with a iframe in the popup that has http://gislap183/js/gotoxy_sample.html

Re: Use iframe to show webpage image in popup

BrandonPrice — Thu, 28 Dec 2017 01:27:20 GMT

I see. But shouldn't I still see the popup container?

Re: Use iframe to show webpage image in popup

RobertScheitlin__GISP — Thu, 28 Dec 2017 02:28:03 GMT

I am not sure with those margins you have set in the iFrame.