The Lemon Fool

I have a website for our holiday cottages which used an iframe to show the calendar from our main booking agent. That meant (a) our website had an up to date calendar, (b) I didn't have to maintain my own calendar and (c) anyone clicking on the calendar went to the agent's website so they got the booking. Everyone won. However, they have changed systems and use a different technology so this no longer works.

I've managed to pull the calendar from our other agent's website, displayed via an iframe but it includes specifics of their Ts & Cs and a drop-down box to select any of their other properties. All I want is the calendar in the middle. Can I do something on my web page to remove or obscure the bits I don't want?

Many thanks
C

Hmm...well I doubt you could do anything reliable with HTML/CSS. You could try putting the iframe inside a div of an appropriate height & width and positioning the iframe within it so that only the rectangle of the agent's website that you want to show is visible (use position: absolute on the iframe and overflow: hidden on the div).

However, getting that to work reliably across different browsers and different operating systems and different screen resolutions, fonts, zoom levels, etc, etc, etc will be really problematic. It's made more difficult (if not impossible) 'cos as the inside of the iframe is from another site (not the "same origin") you can't access it with JavaScript to dynamically figure out the position and dimensions of the bits you want to see.

There's one way you could do it but it'd be a lot of work, being to write a CGI script (e.g. in PERL) on your website that goes out and fetches the agent's page and scrapes it and returns to your website what is needed, but if on me saying that you don't already have an idea of how then you're in for a heck of a learning curve ...

Clariman wrote: Can I do something on my web page to remove or obscure the bits I don't want?

Calendars are a doddle, I put zabuto on a site I'm working recently and it was very simple. So why not embed the calendar directly and avoid the iframe (which can be a security risk) and the hassle of dealing with 3rd party.

If you still want a 3rd party one, a search will show plenty you can drop in, but this looks interesting- plain javascript and html.

Drop me a PM and I'll help you out.

gbjbaanb wrote:

Clariman wrote: Can I do something on my web page to remove or obscure the bits I don't want?

Calendars are a doddle, I put zabuto on a site I'm working recently and it was very simple. So why not embed the calendar directly and avoid the iframe (which can be a security risk) and the hassle of dealing with 3rd party.

If you still want a 3rd party one, a search will show plenty you can drop in, but this looks interesting- plain javascript and html.

Drop me a PM and I'll help you out.

Thanks
It's not just any calendar I want, but the calendar from the booking agent, which is automatically kept up to date.

Clariman wrote:

gbjbaanb wrote:

Clariman wrote: Can I do something on my web page to remove or obscure the bits I don't want?

Calendars are a doddle, I put zabuto on a site I'm working recently and it was very simple. So why not embed the calendar directly and avoid the iframe (which can be a security risk) and the hassle of dealing with 3rd party.

If you still want a 3rd party one, a search will show plenty you can drop in, but this looks interesting- plain javascript and html.

Drop me a PM and I'll help you out.

Thanks
It's not just any calendar I want, but the calendar from the booking agent, which is automatically kept up to date.

How many agents do you have? But anyway... it depends how you're getting it, if you are linking to a webpage of theirs then you're going to get all of their content, if you're linking to a section (a div or similar) then target a smaller part of the div.

However, regardless of all that, you can use a bit of javascript to find the parts you don't want and remove them from the DOM - in your page's window.onload event, use document.getElementbyID (or getElementsbyClass) to find the relevant bit and use .remove() to delete it. Its difficult to say more without knowing the html markup.

gbjbaanb wrote:... it depends how you're getting it, if you are linking to a webpage of theirs then you're going to get all of their content, if you're linking to a section (a div or similar) then target a smaller part of the div.

He's not wanting to link to the agent's page but to embed it, using an iframe, and in either case tacking the id of a div onto the url will only cause the browser to automatically scroll down to that div. It won't result in it only showing that div.

gbjbaanb wrote:However, regardless of all that, you can use a bit of javascript to find the parts you don't want and remove them from the DOM - in your page's window.onload event, use document.getElementbyID (or getElementsbyClass) to find the relevant bit and use .remove() to delete it. Its difficult to say more without knowing the html markup.

That only works for pages on your site. You cannot access the DOM of a page on another site that's in an iframe, frame or window.

https://en.wikipedia.org/wiki/Same-origin_policy
https://javascript.info/cross-window-communication

mc2fool wrote:

gbjbaanb wrote:... it depends how you're getting it, if you are linking to a webpage of theirs then you're going to get all of their content, if you're linking to a section (a div or similar) then target a smaller part of the div.

He's not wanting to link to the agent's page but to embed it, using an iframe, and in either case tacking the id of a div onto the url will only cause the browser to automatically scroll down to that div. It won't result in it only showing that div.

gbjbaanb wrote:However, regardless of all that, you can use a bit of javascript to find the parts you don't want and remove them from the DOM - in your page's window.onload event, use document.getElementbyID (or getElementsbyClass) to find the relevant bit and use .remove() to delete it. Its difficult to say more without knowing the html markup.

That only works for pages on your site. You cannot access the DOM of a page on another site that's in an iframe, frame or window.

https://en.wikipedia.org/wiki/Same-origin_policy
https://javascript.info/cross-window-communication

An iframe still has to have the "link" (ie the src reference) to get the data from. That's what I was referring to, and the idea of manipulating the returned data was (sure I had forgotten XSS) to take the html returned by that url and put it in his own page, rather than in an iframe, because there is no way to manipulate what gets displayed otherwise.

gbjbaanb wrote:

mc2fool wrote:

gbjbaanb wrote:... it depends how you're getting it, if you are linking to a webpage of theirs then you're going to get all of their content, if you're linking to a section (a div or similar) then target a smaller part of the div.

He's not wanting to link to the agent's page but to embed it, using an iframe, and in either case tacking the id of a div onto the url will only cause the browser to automatically scroll down to that div. It won't result in it only showing that div.
:

An iframe still has to have the "link" (ie the src reference) to get the data from. That's what I was referring to, and the idea of manipulating the returned data was (sure I had forgotten XSS) to take the html returned by that url and put it in his own page, rather than in an iframe, because there is no way to manipulate what gets displayed otherwise.

Yes, hence why I said in either case about linking to a page or using an iframe with tacking the id of a div onto the url. But having the iframe "link" (src) refer to a div or similar will still get all of the page content into the iframe; it doesn't return just that div, it simply just automatically scrolls to it.

I pointed out the same-origin problem in my first post in the thread and, as I say there, the way to get round it is with a CGI script, but if Clariman isn't already familiar with that it's a steep learning curve....