0

So, I am making my own page (which is going to be an embedded <iframe> for other websites later). The page simply is an advertisement banner.

I want the banner to be visible for mobile users only, and the content has to different for Android and/or iOS users (by tracking is it Safari browser for example).

I've never had an experience with the <iframe> before, so I don't really understand how the data works with it. Can it be configured on the side of the iframe (my page, the banner's source code)? Or it has to be configured on the website, which is using the <iframe>?

ILLIA
  • 43
  • 5

1 Answers1

1

You'll have to use some feature detection. You'll need to test if the browser is Safari. If it is, then display something. If it's Chrome, display something else. If it's Firefox, display something else.

I don't have a Mac, so I'm doing this based on Chrome.

If it's Chrome, Google.com will display. If it's anything else, Microsoft.com will display.

let ua = navigator.userAgent;
let vendor = navigator.vendor;

let isChrome = /Chrome/.test(ua) && /Google Inc/.test(vendor);

function displayIframe() {
  if (isChrome) {
    console.log(isChrome);
    return `
      <iframe src="https://google.com" title="Google Inc."></iframe>
    `;
  } else {
      return `
      <iframe src="https://microsoft.com" title="Microsoft Inc."></iframe>
      `;
  }    
}

iframe.innerHTML = displayIframe();
<h4>Once you've tried this in Chrome, move over to Firefox and you'll see the difference.</h4>
<div id="iframe"></div>
Millhorn
  • 2,953
  • 7
  • 39
  • 77