title: Allowing a parent window to call a function on its child iframe of a different domain
body: <p>I have an iframe in which src is different domain, and I am trying to call a method in iframe from parent window. Then it is giving below:</p>
  
  <blockquote>
    <p>Uncaught SecurityError: Blocked a frame with origin
    "<a href="http://localhost:8080" rel="nofollow">http://localhost:8080</a>" from accessing a frame with origin
    "<a href="http://stage.xyz.com" rel="nofollow">http://stage.xyz.com</a>". Protocols, domains, and ports must
    match.</p>
  </blockquote>
  
  <p>On main window I have this:</p>
  
  <pre><code>launchUPwidget(widgetParams);
  function launchUPwidget(widgetParams){
      document.getElementById('iframe').contentWindow.invokeUPWidget(widgetParams);       
  }
  </code></pre>
  
  <p>On iframe: </p>
  
  <pre><code>window.invokeUPWidget = invokeWidget;
  </code></pre>
  
  <p>So how can I call a function in child iframe form parent window where iframe src is different domain?</p>
  
  <p>here protocals are same but the domains are different.</p>