Question 236895 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – AppStore not launching from within an iframe

A web app that we’re developing is designed to be embedded into another website and there is a button on one of the screens that open either PlayStore or AppStore depending on the user platform. It works fine on Android but it doesn’t seem to work on iOS, nothing happens when the button is clicked.
We tried the same directly from the web app and it worked, so it seems that iframe is the issue

Here is the click handler function

  const handleDownloadAppStore = () => {
       window.location.href = 'https://apps.apple.com/no/app/idxxxxxxxx';
   };
Tags:

2

Answers


  1. 0

    First, need to check your user agent as it iOS/iPad, for them url is different
    put a condition over there it is iPad/iOS use below url

    "https://itunes.apple.com/app/your-app-id"

    Login or Signup to reply.
  2. 0

    It seems like you’re encountering an issue with opening the App Store on iOS devices when the button is clicked within an iframe. This behavior might be due to certain security restrictions and policies that browsers, especially on iOS, impose on iframes to prevent potentially malicious actions.

    To work around this issue, you can try the following approaches:

    1. Direct Link: Instead of opening the App Store within the iframe, open it directly in the parent window. Change your click handler code to:
    const handleDownloadAppStore = () => {
    window.top.location.href = 'https://apps.apple.com/no/app/idxxxxxxxx';
};

    This should navigate the parent window to the App Store URL and should work even within an iframe.

    1. Rel="noopener": Add the rel="noopener" attribute to the anchor (<a>) tag that wraps the button. This attribute helps prevent the newly opened page from having access to the window.opener object, which can sometimes cause security issues.
    <a href="https://apps.apple.com/no/app/idxxxxxxxx" target="_blank" rel="noopener">
    <button>Download from App Store</button>
</a>
    1. JavaScript Redirect: Instead of relying on a direct URL change, use JavaScript to perform the redirection. This can sometimes work more reliably across different scenarios.
    const handleDownloadAppStore = () => {
    window.open('https://apps.apple.com/no/app/idxxxxxxxx', '_blank');
};

    Remember that cross-origin restrictions and security policies can sometimes lead to unexpected behavior, especially when working within iframes. If the above approaches still don’t work, consider reaching out to Apple’s documentation or support for specific guidelines on opening the App Store from within an iframe on iOS devices. Additionally, keep an eye on any iOS updates that might change the behavior or restrictions related to iframes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search