+ Start a Discussion
Sure@DreamSure@Dream 

XMLHttpRequest cannot load, No 'Access-Control-Allow-Origin' is present

Hi All,

I am having a visualforce page, with a tabpanel component.
<apex:tabpanel switchType="client">
    <apex:tab name="tab1" onTabEnter="parent.setHeight(window);">
     ----------some content------
    </apex:tab>
     <apex:tab name="tab2" onTabEnter="parent.setHeight(window);">
     ----------some other content------
   </apex:tab>
</apex:tabpanel>
First tab will be having content of 1600 px height and second tab content will be having 400px height.

I am displaying this visualforce page in another vf page using an iframe.
I am setting the height of the iframe dynamically onload of the iframe, using the following javascript function.
   function setHeight(obj)
   {
        obj.style.height=obj.contentWindow.document.body.scrollHeight+'px';
    }
   ................
  <apex:iframe html-oncomplete="setHeight(this)" scrolling="false"/>


But when I click on any tab, in the iframe the parent method are not getting called.
Even I am not able to switch the tabs.

In the debug console, its showing an error like following:
"XMLHttpRequest cannot load ..... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '.....' is therefore not allowed access"


Can someone help me with this please?

Thanks
Eli Flores, SFDC DevEli Flores, SFDC Dev
You have to add a listener to the parent VF page then have the child vf send a message to the listener.

So  parent add some JS like this

window.top.addEventListener( "message",
    function (d) {
     if(d.origin !== 'https://c.na6.visual.force.com'){ return; } // replace this with the base URL of your visual force i.e. the part before /apex/yourVFpage
      var payloadArray = JSON.parse( d.data );
 
   if (typeof payloadArray.resize !== 'undefined'){
  console.log('resizing');
  var iframe = document.getElementByID('containing iframe');
  iframe.height = 265 + 26 + payloadArray.resize * 14 ;
   }
    },
  false);


Then have some JS like in the child VF

function resizePopup(){
      // Pass the information back to the parent
       top.postMessage( '{"resize": {!errorCount}}', '{!parentURL}' );
     }

The important thing here is that you have to add a parameter to the child VF page that gives the URL of the parent URL (which i keep in a controller member variable parentURL).