Comments on: Resize iframe based on content

By: Harold Kim

Harold Kim — Tue, 16 Sep 2014 07:31:00 +0000

Hi,

I am trying to track the user based action inside an iframe. Basically the content in the iframe is a website that I dont have control of. Currently I am having problems like “Blocked a frame with origin from accessing a frame with origin”.

Is this possible using easyXDM?

If the answer is yes, how do I do it? best if you can point me to an example.

By: Tobias

Tobias — Wed, 05 Feb 2014 13:42:00 +0000

Thanks for this solution, it works great.

A couple of things I noticed in case they trip anyone else up:
1. The css styling on the remote page is important. You need “overflow: hidden” to make sure the iframe doesn’t show a scroll-bar, and you need “margin: 0px” and “padding: 0px” if you want the paragraph left margin to line up between the local and the remote text. All this is included in the demo files but I didn’t realise it was important until I removed it.

2. If you want the iframe to take up the full width of the local page then add the line “this.container.getElementsByTagName(“iframe”)[0].style.width = “100%”;” just after the line “this.container.getElementsByTagName(“iframe”)[0].style.height = message + “px”;” in the javascript on the local page.

By: brianlmerritt

brianlmerritt — Fri, 31 Jan 2014 09:36:00 +0000

ps – This works fine with WordPress and Moodle. It is probably theme dependant, but both appear to work well with twitter bootstrap based themes. Am just going to test now with video and see how that gets on…

By: brianlmerritt

brianlmerritt — Fri, 31 Jan 2014 09:28:00 +0000

From the comments a lot of people (including developers) struggle getting this together.

1. If you are using easyXDM.debug.js then you need to include the other .js files that come on the github /src and /src/stack folders – and this needs to be installed at both ends

2. the code in the example (resize*.html) files is different from the code listed above. Both work, but you have to make sure the .js and .swf files are in the right locations or edit the html files.

3. resize_intermediate.html needs to be located on the remote (embed) web domain. If the master location doesn’t reference this, it will not work.

4. Most (All?) of the issues with cross domain have nothing to do with easyXDM. The setup is wrong, the files are missing or located wrong, etc.

5. If you are struggling, start with running the full example package in just one domain. Once THAT is working, do the same in the other domain. Once both ends are working, getting each end to do it’s part is soooooo much easier.

6. If you miss this because DISQUS defaults to “best” comment, it’s not my fault. Put a reply under this and eventually it will bubble up and help someone else.

7. You can find me on twitter @brianlmerritt, should you want to 🙂

By: brianlmerritt

brianlmerritt — Thu, 30 Jan 2014 12:38:00 +0000

For people struggling with the default width, on your “master” page add the following below the onMessage:

this.container.getElementsByTagName(“iframe”)[0].style.width = “800px”;

By: clh

clh — Tue, 24 Dec 2013 11:04:00 +0000

I don’t get this. I put in the code and all I get is a blank page no matter what I try.

By: Shae Strachan

Shae Strachan — Mon, 16 Sep 2013 16:11:00 +0000

How can I override the iFrame’s content css? I’d simply like to be able to override the body background color.

By: Ajeftink

Ajeftink — Thu, 10 Jan 2013 22:14:00 +0000

So I have the code working but have two bugs…1. When the Iframe is loaded it sets to width to 300px. I’ve added code to change the width afterwards but why is it setting the width to 300px? Is there something in your code doing that or is that problem on my end?

2. Navigating to a different page on the same domain and then returning to the page with with the iframe results in the iframe height being almost twice as much as it should be. I don’t know why this is happening.

By: aendrew

aendrew — Wed, 05 Dec 2012 19:49:00 +0000

I was able to get this working by putting the socket code in my theme’s footer template, and was pleasantly surprised that clicking iframe’d links resulted in those also changing the window’s height — without having created any sort of intermediary page. Is there any reason why this shouldn’t work that I should be aware of? Or am I just misunderstanding the concept of intermediary frames in this context?

By: Roger Russel

Roger Russel — Tue, 04 Dec 2012 00:35:00 +0000

Hi,

For not lose the socket connection, I take the xdm GET vars and put it into every link of my page with JavaScript, because the easyXDM use those for identify the socket connection, those vars are xdm_e, xdm_c and xdm_p.

Also I couldn’t use the body.scrollHeight, because the body sends the Iframe’s height if it was set, or if the body is bigger than that, my workaround to this was put a div into html and take the scrollHeight from it.

I would prefer do this in a diferent way, but my time was really short.

I hope this be useful.