Pannellum in iFrame suddenly stopped working - javascript

I have a simple "360 Tours" page on a client's Opencart website, using an iFrame on an info page. The page opens with an outside view, the visitor can then select other areas to view by clicking links below. The viewer code pannellum.htm and all the panoramic images are hosted on the client's server with the viewer displayed in an iFrame based on Pannellum's examples.
This was trivial to get working and has operated correctly for months but recently stopped working, displaying nothing where the panoramas once were. I tried Chrome, Firefox & Safari under OSX, Windows and an iPad without Joy. However, this morning I noted that my Chromebook still worked perfectly. So, I updated the Chromebook and it too stopped working. Nothing at my end has changed, though I did update to the latest pannellum.htm today to no avail.
A JS function load360() forms a url and loads this into the .src property of the iFrame which is located by id. Originally, the working code looked like this:
let url=...
let frame=document.getElementById("mf-360");
frame.src=url;
frame.contentWindow.location.reload(true);
Searching reveals that the reload is not required and simply assigning a new url to the .src property should be enough to force a refresh of the iFrame. Removing the reload had no effect, and in fact having it there stops the viewer from ever displaying. However, assigning a blank string to .src then the required url like this..
let url=...
let frame=document.getElementById("mf-360");
frame.src='';
frame.src=url;
..seems to work, but only every _second) time load360 is called.
Does anyone have any idea what's going on?? I'm more of an electronics-design/embedded guy and any help here would be most appreciated..
The site is https://www.davidcoils.com - click '360 Tours' at the top.

Related

JavaScript emulate window being in focus

For a project I need to be able to pull data from a minimized tab that displays the Instagram website. Everything works except for the "minimized" part. As soon as the window is minimized, and I refresh the page, there is no image data coming in. This is why I think it is necessary to "trick" the website into thinking that it's onscreen in order for it to load data.
Steps to reproduce:
open https://www.instagram.com/
right-click > Inspect (Developer Tools, please undock for windowed mode)
confirm that the _4rbun elements contain a srcset with the images
minimize Instagram tab
in the console, type location.reload() to reload the page
in dev tools, confirm that there are 0 or 1 _4rbun elements which however don't contain a picture
open the minimized tab
confirm that there are numerous _4rbun elements which all contain links in their srcsets
Similar behavior can be found in the /explore path except that this, on the contrary, at least contains links to the pages displaying the image (but still no direct link to the .jpg)
Is there anything i can do about this? Other websites use things like Store.js to keep track of their data but I couldn't find anything like this in the website's window object so either going the "hacky" focus way or the much cleaner "Store"-kind of way would be fine.
What I've tried was to override hasFocus like the following document.hasFocus = function(){return true}; which does keep the value on true but doesn't seem to affect the website's behavior at all. And I have tried finding an object carrying links etc. but this has been unsuccessful so far, too.

Modal truncated upon load

I'm facing a rare issue with the modal I made. I had a iframe to load a embedded youtube video on the modal, it was working well on a separate HTML file (an empty) that I had created to test it.
When I tried loading it on a local template of the actual site the youtube video is truncated. And, when i press ctrl+shift+i (the console) the whole video comes out. I searched for any possible solution to the issue.
Can anyone help me. Attaching the photo beneath.
Guys I somehow fixed this issue.
Issues Faced:-
1) I noticed that the truncated video becomes full-sized when I pull up the console log (crtl+shift+i)
2)I tried reloading the div content using innerHTML
3)I tried applying min-height property, the div comes out in the full size but the video still remains the same.
How I fixed it:-
I removed the src from the iframe and then on the function to show the modal i added a line to set the iframes source. This somehow fixed my issue.
Addntly, I also removed all the previous changes made to the CSS and JS file, as listed above.
I know both the question and the solution sounds weird (It does to me too)

Javascript jquery locks up in Safari (only)

I've created a website which uses javascript to run a jquery gallery viewer. A problem surfaces when using the gallery in Safari only (but not with Chrome, Firefox, etc).
At first, the gallery runs smoothly. But if you click through enough pictures (on a single gallery page, or over several pages containing different galleries) eventually the gallery script stops working. At that point, all of the gallery functions stop, even if you visit a different gallery on a different page in the website. Neither refreshing the page, a hard refresh, clearing the cache, visiting a different gallery/page, or closing the tab and re-opening in a new tab, brings back the functionality. The only way to get it working again is to close the Safari window, open a new window, and go to the page again. (I wonder what the browsing session has to do with this?)
I have tried using the console, and tried using Firebug Lite, to diagnose the problem, without success. No errors appear in the console when the script stops working; the controls just stop working.
I can duplicate the problem reliably on different machines running Safari (most easily by repeatedly and quickly cycling through the pictures in a gallery over and over till it locks up). I cannot duplicate the problem using any other browser.
Any help in figuring out what's wrong, or even suggestions of how to troubleshoot the problem, would be greatly appreciated!
The galleries can be found here:
http://www.gailcohenphotography.com/galleries.html
Many thanks,
- Paul

javascript - different behaviour on page refresh

I have a really weird problem.
I have a site (running wordpress), and I use jquery roundabout plugin.
When I visit the site with the address bar, the site is displayed fine. When I'm already in the site and I hit refresh - everything is messed up. I checked in both chrome and firefox, and I get the same result. In IE there is no problem.
Also, I noticed that the problem occurs only when doing a soft refresh (F5) and it's ok when doing a hard refresh (Ctrl+F5)
You can check for yourself in my test site
http://50.112.34.111
try to press enter in the address bar a few times - should display ok. try to refresh - and you'll see the problem...
First of all I would try to put the JS includes (<script.../>) in the header AFTER all CSS includes! That might already help. Since the CSS might influence your JS, JS has to know all CSS before it gets loaded.

Website wont show on IE once I activate scripts. Everything is missing except for the background

So, I've been creating a site based off a template. The site used to work on IE, but I'm afraid that I have made changes since then that causes everything to go haywire. When first visiting the site my grids and alignments are all off and most of the javascript doesnt work. When I activate scripts and ActiveX all of the elements of the site are invisible except for the background. Though, I can still see the source in this instance.
The site (for now) is: http://www.escroft.com/index(main).html
If the site is not displaying when you turn scripts on, you probably have a script error. Open your developer tools with F12, and reload the page; the console should show you what errors you have, and then you're on your way to fixing them.

Categories