Embed website

[Donati5142]

Hi Mark,

I just wanted to reach out and express my admiration for your work. It's always inspiring to see what the Star Citizen community is creating to enhance the gaming experience.

I would love to feature your site on our website using an iframe so that visitors can see who created the website and give credit where it's due.

Unfortunately, I'm facing an issue with the iframe implementation. While your website loads correctly when I first link to it, it stops loading after a page refresh and only loads again after a full browser reset. This is a major inconvenience and I was hoping you could help me resolve this issue so that I can add this fantastic tool to our organization's website.

Any assistance you could provide would be greatly appreciated. Thank you!

This is the code I used:

<title>VerseTime</title> <iframe src="https://dydrmr.github.io/VerseTime/" frameborder="0" style="width: 100%; height: 500px; border: none; background-color: transparent;"></iframe>

ps. Is there a way to set or change the real local time ?

Thank so much for all your work, trouble and support.

[dydrmr]

Hi,

Thanks for the kind words; I'm glad you find the site so useful! Are there any error messages in the developer console when this problem happens? Hard to tell what's going on without seeing it in action. It could be the Javascript URL rewriting that's messing it up, or maybe it's not reading settings properly from local storage because it's in an iframe?

If you feel comfortable letting me access this particular page on your org's site, I could take a look at it myself.

The real local time is based on the system time set on the computer accessing the site. There's no way to change that on VerseTime right now, but it could be implemented with a user-defined setting.

[Donati5142]

I really appreciate you taking the time to visit us. Here's a link to the website:
https://orisonspaceport.wixsite.com/orison/versetime

When you first access the page, the VERSETIME loads perfectly in the iFrame. However, if you navigate within the site and refresh the page, the VERSETIME fails to load in the iFrame.

It will only function again after a complete reset of the browser settings.

[dydrmr]

Hm, it won't even load VerseTime inside the iFrame for me. Aditionally, I'm getting cross-origin errors thrown whenever VerseTime tries to modify the URL (which happens on first load and anytime the selected location changes):

Uncaught DOMException: Blocked a frame with origin "https://dydrmr.github.io" from accessing a cross-origin frame. at setLocation (https://dydrmr.github.io/VerseTime/ui-controller.js:91:24)

Do you have the ability to change CORS settings on your site to allow resources from outside of your domain?

[Donati5142]

Unfortunately, my knowledge of this stuff is really bad, That is why I designed the website on WIX, lol.
I can tell you that I'm loading 3 other sites, like https://verseguide.com/ & SCMiningMom.com, blog page, etc. as examples using the same method. Strange that it does not open for you at least once.

---

Uncaught DOMException: Blocked a frame with origin "https://dydrmr.github.io" from accessing a cross-origin frame. at setLocation (https://dydrmr.github.io/VerseTime/ui-controller.js:91:24
This error occurs because of the same-origin policy, which prevents a web page from accessing resources or content from a different domain. In this case, the iframe is trying to access the content of the website hosted at "https://dydrmr.github.io/", which is different from the domain hosting the iframe.

One solution is to use a proxy server that makes the request to the website on behalf of your page, so that the browser does not block the request due to the same-origin policy. You can create a simple proxy server using a server-side language such as PHP or Node.js, or you can use a publicly available proxy service.

Here's an example using a publicly available proxy service "CORS Anywhere":

<iframe src="https://cors-anywhere.herokuapp.com/https://dydrmr.github.io/VerseTime/"></iframe> This makes a request to the proxy service, which in turn makes the request to the website and returns the result to your page, effectively bypassing the same-origin policy.

missing required request header error
This error message usually occurs when a server is configured to only allow requests that include a specific header, such as an "Authorization" header. The server is rejecting the request because it doesn't contain the required header.

If you are using a proxy service, such as "CORS Anywhere", to bypass the same-origin policy, you may need to add the required header to the request.

Here's an example of adding an "Authorization" header to the request:

php
Copy code

<iframe src="https://cors-anywhere.herokuapp.com/https://dydrmr.github.io/VerseTime/"></iframe> <script> document.querySelector("iframe").addEventListener("load", function() { this.contentWindow.fetch = function(input, init) { init = init || {}; init.headers = init.headers || {}; init.headers["Authorization"] = "Bearer xxxxxxxx"; return window.fetch.apply(this, [input, init]); }; }); </script> In this example, the "Authorization" header is added to the request when the iframe loads. The value of the header, "Bearer xxxxxxxx", should be replaced with the actual value required by the server.

---

Don't know if any of this makes sense to you. :)

[Donati5142]

ps. I recreated this in Squarespace, (WIX competition) Get the same problem there. So it's not WIX-specific.

[dydrmr]

I'm still not sure what could be causing this. My suggestion would be to download the repository and try embedding a local copy of VerseTime on your site.

I'm handling a substance abuse intervention in my family right now and it's taking up all of my time and energy, so I don't know when I'll be able to get back to this project and investigate further. Hope you can get it to work, though. Keep us posted.

[Donati5142]

Sure thing, 100%
Thank you for your support and time.