时间戳

首页 > 解决方案 > iFrames 根据用户操作系统使用

html - iFrames 根据用户操作系统使用

问题描述

根据用户操作系统，我想显示两个 iframe 中的一个。如果用户使用 iOS，它会显示一个，如果 android 则显示另一个。

<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>

标签： htmliframe

解决方案

您可以像这样在 Javascript 中检测 userAgent。

<html>

<body>
  <div id="vectary"></div>
  <script>

    function getOs() {
      var userAgent = navigator.userAgent || navigator.vendor || window.opera;

      if (/android/i.test(userAgent)) {
        //Vectary iframe 1 - for Android
        return '<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>';
      }

      // iOS detection from: http://stackoverflow.com/a/9039885/177710
      if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        //Vectary iframe 2 - for iOS
        return '<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>';
      }

      //Vectary iframe 3 - for all other cases
      return '<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>';
    }

    document.getElementById("vectary").innerHTML = getOs();

  </script>
</body>

</html>

推荐阅读