Crossdomain iFrame resize issues

Question

I got this code from another source to use on my website,

<!DOCTYPE html>
<html>
    <head>
        <script src="http://domain-name.co.uk/js/theirscript.js"></script> 
    </head>
    <body>
        <iframe src='http://domain-name.co.uk/quote/quote_0.numo?id=mySplID' id="ifHolderQuote" width="660" frameBorder="0" marginwidth="0" marginheight="0" scrolling="no" allowTransparency="true" onload="resizeCrossDomainIframe('ifHolderQuote', 'http://mySplDomain.co.uk');">
        </iframe>
    </body>
</html>

but for some reason, when I view the plain HTML file using my browser I cannot see it completely. It only shows a small section like this.

enter image description here However in the actual test file uploaded in their website I can view the complete iFrame.

enter image description here Any idea how can I fix my code to reflect the change? This is the scrip that is used.

  function resizeCrossDomainIframe(id, other_domain) {
    var iframe = document.getElementById(id);
    window.addEventListener('message', function(event) {
      if (event.origin !== other_domain) return; // only accept messages from the specified domain
      if (isNaN(event.data)) return; // only accept something which can be parsed as a number
      var height = parseInt(event.data) + 40; // add some extra height to avoid scrollbar
      iframe.height = height + "px";
    }, false);
  }

EDIT: I uploaded the file to the server to see if there was some problem with opening it locally from the browser, even after uploading to the server it did not work.

score 0 · Answer 1 · answered Jul 09 '14 at 10:32

0

The condition event.origin !== other_domain will be always true when viewing it from your computer since you don't have a domain in the URL because the browser opens the file with a file:/// protocol.

So, the function ends there and you're never declaring the height of the iframe.

answered Jul 09 '14 at 10:32

Andrés Torres

747
5
16

Sorry, I should have also added, to see if something like that could be a problem I even uploaded the file on to the domain, still it did not come up the way I wanted it to be. Appreciate the response. – PaulFrancis Jul 09 '14 at 10:42
That's what i'm trying to say, If you upload this to a server... it would have a domain and the script will work, but no if you are running it from your computer because `file:///C:\Users\Somebody\Desktop\something.html` is not an URL and doesn't have a domain. – Andrés Torres Jul 09 '14 at 10:46
I also made the Script placed inside the head tag, to debug I added an alert statement to show the passed Domain, it came up with my domain name, then I used another alert just before the **If (event.origin** line and it never came up. So I have a strange feeling the function is never even called?? – PaulFrancis Jul 09 '14 at 10:48
You're not getting it :(. Let me put it straight: When you run this from your computer (not a server). What are the values of `event.origin` and `other_domain`? – Andrés Torres Jul 09 '14 at 10:50
I understand what you meant ! I have now uploaded the file to the server, changed my Script tag as (I will post it in my next comment). It displayed the first alert - My-Domain.co.uk. The next two alert did not come up at all... – PaulFrancis Jul 09 '14 at 10:53
`code` `code` – PaulFrancis Jul 09 '14 at 10:54
You are trying to access to `event.origin` from outside the listener. So your script is diying there. Put the alerts inside the function and try again. Also check the browser console for errors! :P – Andrés Torres Jul 09 '14 at 11:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/57013/discussion-between-paulfrancis-and-andres-torres). – PaulFrancis Jul 09 '14 at 11:17
It keeps coming up with "Please avoid extended discussions in comments." So I started a chat, with some info there. Could you please have a look? – PaulFrancis Jul 09 '14 at 12:37

score 0 · Accepted Answer · edited May 23 '17 at 12:01

Well figured out this is a security issue. iFrame I used does not allow cross domain origin script to be run. Since I was using the Frame that is in some other domain, and putting it on to my domain caused the difference in the origin policy established by Moziall/many other popular browsers.

After an intensive search and reading I ended up at this thread,

Ways to circumvent the same-origin policy

So I am working on correcting the issue; using the CORS request. Could be very interesting.

Crossdomain iFrame resize issues

2 Answers2