使用javascript从iframe检测浏览器并根据浏览器显示不同的<div>内容?

时间:2015-12-03 13:05:38

标签: javascript asp.net vb.net iframe browser

我看过这个链接。

Browser detection in JavaScript?

我的问题略有不同。此链接适用于普通网页。我想从iframe中检测浏览器,并希望在浏览器的基础上显示不同的内容。

让我详细解释一下

我们已经使用asp.net和vb.net构建了一个应用程序。我们的客户可以将此应用程序作为iframe集成到他们的网站中。

这个iframe有10-12页。其中一个iframe页面的代码就像

<%@ Page Title="" Language="VB" MasterPageFile="~/cn/MasterPage.master" AutoEventWireup="false" CodeFile="login.aspx.vb" Inherits="pn_login" %>

<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" runat="Server">
<h2>Register or log in to apply</h2>
    <div class="login-wrapper" id="safari">
         XXXXXXXXXXX
    </div>
    <div class="login-wrapper" id="other">
         YYYYYYYY
     </div>

<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="ScriptContent">

<script type="text/javascript">

 var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;

</script>

iframe及其页面适用于除safari之外的所有浏览器。所以我只需要检测浏览器是否是safari。脚本代码确定浏览器是否是safari。如果变量isSafari的值为true,则用户使用safari,否则值为false。

到目前为止一切顺利。现在我们想根据变量显示不同的内容。即

if isSafari==True then 
     <div class="login-wrapper" id="safari"> xxxxx </div>
else
     <div class="login-wrapper" id="other"> yyyy </div>

我该怎么做?

了解更多信息

我们的Web应用程序使用母版页并且还依赖于数据库。在母版页中,我们已经在body onload下使用了一个javascript函数。

iframes母版页的代码是。

<body onload="iframeResizePipe()">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <div class="careers  b-<%: CInt(Request("b"))%>">
        <asp:ContentPlaceHolder ID="mainContent" runat="server" />

    </div>
</form><br />

</body>

请注意

我不想只是检查浏览器并告诉用户他们正在使用哪个浏览器。用户知道他们正在使用哪种浏览器。我想在后端检测浏览器。如果用户正在使用safari,那么我想向他展示不同的内容。如果他们不使用safari,内容会有所不同

我也看过这个链接https://www.whatismybrowser.com/developers/tools/iframe。它不是我想要的

感谢您的建议。

由于

2 个答案:

答案 0 :(得分:1)

if (isSafari) {
document.getElementById("safari").style.display = 'block';
document.getElementById("other").style.display = 'none';
} 
else {
document.getElementById("safari").style.display = 'none';
document.getElementById("other").style.display = 'block';
}

答案 1 :(得分:0)

检查浏览器的最简单方法是功能标记。来自另一个网站的示例代码为。 <iframe src="https://www.whatismybrowser.com/feature/iframe?capabilities=true" width="600" height="270" style="border: none;"></iframe>