Dinkelborg

Calling Events with "window.addEventListener" in a Frameset

Recommended Posts

Hi, 
I'm momentarily experiencing really strange behavior of the function 

window.addEventListener('keydown', onKeyDown, false);

now, first I had this integrated into my index.html by just writing:

<script>window.addEventListener('resize', onResize, false);window.addEventListener('keydown', onKeyDown, false);</script>

after the referencing of my "main.js" in which the functions 'onResize' and 'onKeyDown' are described. 

 

 

Now this works perfectly fine if you visit the original

URL

which is hosted on a free web-storage host called "bplaced.net" but it won't work if you visit the forwarded

URL

that I pay for.
The forwarding is done by a Frame-Redirect, and so the page uses a frameset to display the content. 

Could this cause the problem and is there a way to fix it? 
Thanks in advance.

~Dinkelborg

Share this post


Link to post
Share on other sites

The web page of the second URL contains a frame. Your code is downloaded within this frame from another domain :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>AnalogMadness</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><meta name="description" content="AnalogMadness is momentarily under construction. Stay tuned at www.analogmadness.com" /><meta name="keywords" content="Analog, Madness, Games, Development" /><link rel="shortcut icon" href="" /></head><frameset rows="100%"><frame src="http://analogmadness.bplaced.net//Demo/FoliageShader/index.html" name="progframe" scrolling="auto" noresize="noresize" frameborder="0" /><noframes><body><p>Bitte klicke <a href="http://analogmadness.bplaced.net//Demo/FoliageShader/index.html">hier</a>.</p></body></noframes></frameset></html>

This seems to be some SOP restriction in the browser : an embedded frame (from another origin) can't modify the parent window object !

So you could declare your listeners in the main page but they wouldn't have access to the frame content (js callback functions) either (different origins again).

 

Your only solution, if you still want to use frames, is to use the same origin for the frame and the main window OR to attach your listener to some DOM element within the frame : <body>, <div>, etc

Share this post


Link to post
Share on other sites

Okay I tried to add the eventlisteners to "document.body" and also to the render-canvas and both don't work either ways ...

 

I don't have this problem with three.js this should really be a babylon-related problem see here: http://analogmadness.com/Demo/ThreeJS (check console output or use a and d to move the ball) with that project I am using the same domain and everything, just three.js instead of babylon.js and the eventListeners are added in the index.html, as I originally tried with the other babylon-project too     

<script>window.addEventListener('mouseDown', onMouseDown, false);</script>    <script>window.addEventListener('keydown', onKeyDown, false);</script><script>window.addEventListener('resize', onResize, false);</script>

Share this post


Link to post
Share on other sites

@Deltakosh yes it's referenced in the index.html, but I'm not using any of its functions 

@jerome no I just returned everything into the original state (window.addEventListener) but it still doesn't work for me neither in Firefox nor in Chrome, are you sure you're looking at

"analogmadness.com" and not

"analogmadness.bplaced.net" ?

Share this post


Link to post
Share on other sites

@Deltakosh: Yes that solves the problem... well half way... If I don't attach controls for the camera key-input works , if you were to test the scene now here (the url with the frame-set) you will be able to use Space to switch cameras and everything, while you cannot control each camera (logically) 

@jerome I don't exactly know what that means, but how do you test that? Could be useful in the future :)

Share this post


Link to post
Share on other sites

in Chromium (there are the same tools in IE and FF, names and locations may vary), open "Development Tools" menu

then tab "Elements" in the left panel

choose in the hmtl code underneath the element you want to inspect ex : <iframe>, or <body> etc

once selected, click the "Event Listeners" tab in the right panel, you can see every listener registered to the element

Share this post


Link to post
Share on other sites

@Deltakosh: So... is this a bug or so now? Since the standard Cameras become entirely useless like this... as soon as I want to add a button-press function or so I will have to detach the camera control from canvas... 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.