CODEWITHSUNDEEP
javascriptjqueryiframehttp-headers
GusRuss89
GusRuss89

Reputation: 1404

Making iFrames More Usable

So a client of mine has signed up with a ticketing company who have convinced them to go with a solution that basically embeds their system on my client's website via an iframe. Yuk.

This means that on my client's events page, they'll be navigating through events in an iframe and the parent's url will never change.

I'm just wondering if there's anything I can do to make that particular problem less of a problem. E.g. on each page load in the iframe, send something to the parent's url that identifies what page of the iframe is currently open? That way if someone shares the url, or refreshes via the browser, they're not left back at the starting page in the iframe.

I can probably get a javascript file of my own added to the iframe, not sure how much else I could manipulate the iframe.

Any suggestions would be awesome.

Thanks!

Upvotes: 2

Views: 80

Answers (1)

Butt4cak3
Butt4cak3

Reputation: 2429

You can listen for the onLoad-event of your iframe and get the current URL of the page inside.

var iframe = document.getElementById("myframe"); // That's our iframe
iframe.addEventListener("load", function() {
  var currentURL = iframe.contentDocument.URL; // The current URL of the page inside the iframe
});

You can then do what you need with this URL. You can also change the URL in the browsers URL bar with window.history.

// Inside the onLoad-event of the iframe
window.history.pushState({}, "", "?framepage=" + currentURL.split("/").pop());

This will change the URL everytime the user changes the location inside the iframe, or to be more precise, it adds a URL parameter. Let's say the user navigates to http://example.com/somepage/whatever.html. The URL in the browser will have the URL parameter ?framepage=whatever.html. You can now make the page load the page provided in this URL parameter on the first load, so that people can share these links and the iframe initially has the right src.

What you store and how you store and react to it is up to you. I don't know how exactly your page and the page inside the frame work. The last steps are just an example to provide one possibility. I hope you can build on this.

Upvotes: 1

Related Questions