Skip to Content (Press Enter)
2023-12-20 21-15-17
Rob Poels
212Views
4Comments
Device detection in iframes
Question
OutSystems UI

Hi all,

I have developed a web application (OutSystems11, using OutSystemsUIWeb) which has to be embedded in an iframe.
One of the pages contains a gallery, which should have following behaviour:
- desktop: 4 items per line
- tablet: 2 items per line
- phone: 1 item per line

When opening the page directly, the behaviour is as stated before.
When the page is embedded in an iframe (which is running on another webserver/domain) however, the page layout is completely messed up. 

The inspector shows following error:
Uncaught DOMException: Blocked a frame with origin "https://<xxx>.outsystemsenterprise.com" from accessing a cross-origin frame.
    at new deviceDetection (https://<xxx>.outsystemsenterprise.com/<yyy>/Blocks/OutSystemsUIWeb/Private/DeviceDetection.js?40885:51:19)

The script error occurs in the deviceDetection function used in OutSystemsUIWeb (bold text is where the error occurs):
// Chech if is Preview In Devices
if(window.top.document.querySelector(".marvel-device") !== null) {
    isPreviewInDevices = true;
}

As a result, my page is no longer responsive when embedded in an iframe.
Already tried configuring Content Security Policy, without result yet.

Hope someone has a clue how to fix this issue


Regards,

Rob.

0
0
02 Dec 2019
Copy Link
2018-08-26 20-34-32
Pankaj pant

Rob Poels wrote:

Hi all,

I have developed a web application (OutSystems11, using OutSystemsUIWeb) which has to be embedded in an iframe.
One of the pages contains a gallery, which should have following behaviour:
- desktop: 4 items per line
- tablet: 2 items per line
- phone: 1 item per line

When opening the page directly, the behaviour is as stated before.
When the page is embedded in an iframe (which is running on another webserver/domain) however, the page layout is completely messed up. 

The inspector shows following error:
Uncaught DOMException: Blocked a frame with origin "https://<xxx>.outsystemsenterprise.com" from accessing a cross-origin frame.
    at new deviceDetection (https://<xxx>.outsystemsenterprise.com/<yyy>/Blocks/OutSystemsUIWeb/Private/DeviceDetection.js?40885:51:19)

The script error occurs in the deviceDetection function used in OutSystemsUIWeb (bold text is where the error occurs):
// Chech if is Preview In Devices
if(window.top.document.querySelector(".marvel-device") !== null) {
    isPreviewInDevices = true;
}

As a result, my page is no longer responsive when embedded in an iframe.
Already tried configuring Content Security Policy, without result yet.

Hope someone has a clue how to fix this issue


Regards,

Rob.

As I did something similar to this long back there is an option in the browser to make this thing working just after the URL to unblock this issue.

somewhere I have made a pointer



Regards,

Pankaj Pant




1
1
02 Dec 2019
Copy Link
2020-02-15 02-48-12
Galter
Champion

Rob Poels wrote:

Hi all,

I have developed a web application (OutSystems11, using OutSystemsUIWeb) which has to be embedded in an iframe.
One of the pages contains a gallery, which should have following behaviour:
- desktop: 4 items per line
- tablet: 2 items per line
- phone: 1 item per line

When opening the page directly, the behaviour is as stated before.
When the page is embedded in an iframe (which is running on another webserver/domain) however, the page layout is completely messed up.

The inspector shows following error:
Uncaught DOMException: Blocked a frame with origin "https://<xxx>.outsystemsenterprise.com" from accessing a cross-origin frame.
    at new deviceDetection (https://<xxx>.outsystemsenterprise.com/<yyy>/Blocks/OutSystemsUIWeb/Private/DeviceDetection.js?40885:51:19)

The script error occurs in the deviceDetection function used in OutSystemsUIWeb (bold text is where the error occurs):
// Chech if is Preview In Devices
if(window.top.document.querySelector(".marvel-device") !== null) {
isPreviewInDevices = true;
}

As a result, my page is no longer responsive when embedded in an iframe.
Already tried configuring Content Security Policy, without result yet.

Hope someone has a clue how to fix this issue


Regards,

Rob.

 Hello @Rob Poels, Were you able to overcome this problem? If so, please post it and let others know what your solution was.


Give it now, thank you.


Att.,


Galter.

0
0
20 Jul 2020
Copy Link
2023-12-20 21-15-17
Rob Poels

Galter wrote:

Rob Poels wrote:

Hi all,

I have developed a web application (OutSystems11, using OutSystemsUIWeb) which has to be embedded in an iframe.
One of the pages contains a gallery, which should have following behaviour:
- desktop: 4 items per line
- tablet: 2 items per line
- phone: 1 item per line

When opening the page directly, the behaviour is as stated before.
When the page is embedded in an iframe (which is running on another webserver/domain) however, the page layout is completely messed up.

The inspector shows following error:
Uncaught DOMException: Blocked a frame with origin "https://<xxx>.outsystemsenterprise.com" from accessing a cross-origin frame.
    at new deviceDetection (https://<xxx>.outsystemsenterprise.com/<yyy>/Blocks/OutSystemsUIWeb/Private/DeviceDetection.js?40885:51:19)

The script error occurs in the deviceDetection function used in OutSystemsUIWeb (bold text is where the error occurs):
// Chech if is Preview In Devices
if(window.top.document.querySelector(".marvel-device") !== null) {
isPreviewInDevices = true;
}

As a result, my page is no longer responsive when embedded in an iframe.
Already tried configuring Content Security Policy, without result yet.

Hope someone has a clue how to fix this issue


Regards,

Rob.

 Hello @Rob Poels, Were you able to overcome this problem? If so, please post it and let others know what your solution was.


Give it now, thank you.


Att.,


Galter.

Hi Galter,

unfortunately, I wasn't able to fix it in OutSystemsUIWeb
In the end I rewrote my application in SilkUI to get it solved.

Regards,
Rob

 

1
0
20 Jul 2020
Copy Link
2020-02-15 02-48-12
Galter
Champion
Hello Rob, good morning.
I found a solution for my case.
The solution was applied at https://www.aamparaautismo.org.br/
What did I do? I applied a deal on the JS exception that the javascript was generating. For this, it was necessary to clone the OutSystemsUIWeb project and Edit the WebBlock DeviceDetection, see information below:


var deviceDetection = function() {

    /* $0 - Variable Declaration */

    var deviceDetect;

    var userValues;

    var device;

    var os;

    var browser;

    var orientation;

    var height;

    var width;

    var isPreviewInDevices;    

    

    try {

        // Chech if is Preview In Devices

        if(window.top.document.querySelector(".marvel-device") !== null) {

            isPreviewInDevices = true;

        }

    }

    catch(err) {

      isPreviewInDevices = true;

    }       

    /* $1 - Device Detection Object declaration */

    deviceDetectionObj = function() { 


0
0
22 Jul 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.