Merge fix-openwebsite-iframe

CHANGELOG.yml

@@ -1,8 +1,12 @@
+version: "1.0.0-beta-02"
+  date: "2018-01-23"
+  fixes:
+    - "If the sense-client is running in an iframe, open website in parent frame"
 version: "1.0.0-beta-01"
   date: "2018-01-22"
   changes:
     - "Update documentation"
-version: "1.0.0-rc1-07"
+version: "1.0.0-alpha-07"
   date: "2018-01-12"
   added:
     - "test: button alignment "
@@ -12,20 +16,20 @@ version: "1.0.0-rc1-07"
     - "chore: update extension-utils, use one general file"
     - "test: add some test rules to the makeFile"
     - "test: some basic unit tests"
-version: "1.0.0-rc1-06"
+version: "1.0.0-alpha-06"
   date: "2018-01-09"
   changes:
     - "fix an issue in splitToStringNum - assigning a value to a const"
     - "Set debug mode to false !"
     - "Bump sense-go to v0.14.3: fixes an issue where .css files are not copied to the /release folder"
     - "Include sense-go to dev-dependencies"
     - "Fix constant error (fixed #114)"
-version: "1.0.0-rc1-04"
+version: "1.0.0-alpha-04"
   date: "2018-01-09"
   changes:
     - "Update to latest version of font-awesome"
     - "Add font-awesome as npm dependency, deploy with sense-go"
-version: "1.0.0-rc1-03"
+version: "1.0.0-alpha-03"
   date: "2018-01-06"
   added:
     - "Same window for navigation-action `Open a website`"
@@ -36,11 +40,11 @@ version: "1.0.0-rc1-03"
     - "e2e test: go to prev sheet"
     - "e2e test: open website (same window)"
     - "e2e test: open website (new window)"
-version: "1.0.0-rc1-02"
+version: "1.0.0-alpha-02"
   date: "2017-11-11"
   changes:
     - "Remove jQuery dependency"
-version: "1.0.0-rc1-01"
+version: "1.0.0-alpha-01"
   date: "2017-11-11"
   changes:
     - "Added multiple actions instead of just two"

Makefile

@@ -13,26 +13,26 @@ run-dev: build 				## Run the local development environment
 	echo "Open http://localhost:4848/sense/app/sense-navigation_v1x.qvf"
 	# We might use: python -mwebbrowser http://example.com
 
-build: 								## Build the extension (dev build)
+build:                ## Build the extension (dev build)
 	npm run build
 .PHONY: build
 
-release: 							## Build the extensions (release build)
+release:              ## Build the extensions (release build)
 	npm run release
 .PHONY: release
 
-gen-readme:						## Generate the README.md (using docker-verb)
+gen-readme:           ## Generate the README.md (using docker-verb)
 	docker run --rm -v ${PWD}:/opt/verb stefanwalther/verb
-.PHONY: docs
+.PHONY: gen-readme
 
-test-e2e-release:			## Test release build
+test-e2e-release: 		## Test release build
 	npm run release && \
 	export ENV=release && \
 	npm run dc-rs && \
 	npm run test:e2e
 .PHONY: test-e2e-release
 
-test-e2e-dev:					## Test dev build
+test-e2e-dev:         			## Test dev build
 	npm run release && \
 	export ENV=dev && \
 	npm run dc-rs && \

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sense-navigation",
-  "version": "1.0.0-beta-01",
+  "version": "1.0.0-beta-02",
   "description": "Sense Sheet Navigation + Actions visualization extension for Qlik Sense.",
   "keywords": [
     "actions",

src/swr-sense-navigation.js

@@ -33,6 +33,24 @@ define(
       return 'http://' + url;
     }
 
+    /**
+     * Check if running in an iframe.
+     *
+     * Catching the error is necessary as browsers could block access to window.top due to the same-origin-policy.
+     * (see same origin policy)
+     *
+     * @link https://stackoverflow.com/questions/326069/how-to-identify-if-a-webpage-is-being-loaded-inside-an-iframe-or-directly-into-t
+     *
+     * @returns {boolean}
+     */
+    function inIframe() {
+      try {
+        return window.self !== window.top;
+      } catch (e) {
+        return true;
+      }
+    }
+
     return {
 
       definition: props,
@@ -89,7 +107,14 @@ define(
                 let url = $scope.layout.props.websiteUrl;
                 const same = $scope.layout.props.sameWindow;
                 if (!__.isEmpty(url)) {
-                  window.open(fixUrl(url), (same ? '_self' : ''));
+                  const isIframe = inIframe();
+                  let target = '';
+                  if (same && isIframe) {
+                    target = '_parent';
+                  } else if (same) {
+                    target = '_self';
+                  }
+                  window.open(fixUrl(url), target);
                 }
                 break;
               case 'prevSheet':

test/qlikcloud/README.md

@@ -0,0 +1,4 @@
+# Why
+
+Solution for running the extension in qlikcloud.com where the sense-client is actually running 
+within an iframe (as of 2018-01).

test/qlikcloud/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>QlikCloud Iframe test</title>
+</head>
+<body>
+<iframe height="700px" width="100%" src="http://localhost:4848/sense/app/sense-navigation_v1x.qvf"></iframe>
+</body>
+</html>