Viewer Api 1.3.x not working

viewer
api

(Nikunjarora12345) #1

I’m importing the viewer api using the old script import in index.html and using it along with SketchfabUtility.js in my vue.js project

However, the viewer loaded event is never fired. Looking at the chrome console, I get an error stating “Blocked a frame with origin “http://localhost:8080” from accessing a cross-origin frame.”

This error only occurs when using api v1.3 or v1.3.1. It was working fine in v1.2.1.
The error also occurs when initializing the client directly without using SketchfabUtility.js

Full stack trace:-
vue.runtime.esm.js?2b0e:144 Uncaught DOMException: Blocked a frame with origin “http://localhost:8080” from accessing a cross-origin frame.
at hasOwnProperty ()
at hasOwn (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:145:25)
at observe (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:937:7)
at defineReactive (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:978:29)
at Observer.walk (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:890:5)
at new Observer (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:878:10)
at observe (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:946:10)
at Sketchfab.reactiveSetter [as _client] (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1010:29)
at Sketchfab._initializeAPIEmbed (https://static.sketchfab.com/api/sketchfab-viewer-1.3.1.js:871:22)


(Paul Sketch) #2

Will try to reproduce the bug, can you configrm the setup:


(Nikunjarora12345) #3

Hi,
Thanks for the response.

  1. The url localhost:8080 represents the origin of my project used in same origin policy.
  2. Using the viewer api to run sketchfab model in a vue.js project( tried many model urls, but none of them works )

(Shaderbytes) #4

Hi Im not sure what utility you are referring to , but if it is mine , I can assure you its works correctly with 1.3 and also I have used it in VUE applications as well without any issues. Also tested plenty running as local host without problems.

So if it is mine you can see the docs here , with a download link to the latest github version , also the docs are full of codepen examples using the utility and version 1.3 without problems. Check the docs and examples and see if you have any problems running the examples.


(Nikunjarora12345) #5

Hi Shaderbytes,
Thanks for replying. I tried using the new utility and still getting the same error. I’m pasting the code below, please let me know if I’m making a silly mistake or something.

Index.html -

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sketchfab</title>
</head>

<body>
    <div id="main">
        <iframe ref="viewer" style="position: fixed; left: 0; top: 0; width: 100%; height: 100%; border: 0;"
            allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    </div>

    <script src="https://static.sketchfab.com/api/sketchfab-viewer-1.3.1.js"></script>
    <script src="https://rawgit.com/shaderbytes/Sketchfab-Viewer-API-Utility/master/SketchfabAPIUtility.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="main.js"></script>
</body>

</html>

main.js -

const app = new window.Vue({
  el: "#main",
data() {
	return {
		sketchfab: null,
		modelId: "e6dbb7fbd93e476eab81bdd21e482dc1"
	};
},
methods: {
	viewerLoaded() {
		console.log("Loaded"); // never called
	}
},
mounted() {
	const iframe = this.$refs.viewer;

	const clientInitObject = {
		autostart: 1
	};

	this.sketchfab = new SketchfabAPIUtility(
		this.modelId,
		iframe,
		clientInitObject
	);

	this.sketchfab.addEventListener(
		this.sketchfab.EVENT_INITIALIZED,
		this.viewerLoaded
	);
	this.sketchfab.create();
}
});

Tested on Google chrome Version 69.0.3497.100 (Official Build) (64-bit)


(Shaderbytes) #6

try change “this.viewerLoaded” to “app.viewerLoaded” see if it helps?? might be a scope issue. Maybe declare the variable to hold the utility outside the scope of the VUE app :

var sketchfab;
const app = new window.Vue({
...

then inside your mounted function just set this variable :

sketchfab = new SketchfabAPIUtility(
		this.modelId,
		iframe,
		clientInitObject
	);

again when adding your listener :

sketchfab.addEventListener(
		sketchfab.EVENT_INITIALIZED,
		app.viewerLoaded
	);
sketchfab.create();

Not saying you have to use this logic , just for testing purposes as i have used VUE three times before but I cant be sure of all the scope logic within its internals, so Im just taking a safe route here


(Nikunjarora12345) #7

Moving the sketchfab object outside of vue scope is working. Thank you so much for that.
However, this was only a sandbox environment. My actual project is a single page application built with vue and webpack. Declaring the sketchfab object outside the scope is going to be tricky.

I am, however, still curious as to why this was working for previous sketchfab versions and not 1.3…