条件付きの JavaScript コードが必要です。
display:none コードを設定する必要はありません。それはすでに動作します。しかし、html/body クラスに基づいたコードが必要です。
body/html クラスが「gecko」の場合、Firefox の div のみを表示し、他のすべての div をページから削除します。お気に入り：
<body class="gecko">
<div id="firefox"></div>
<div id="ie"></div> [need to remove this]
<div id="chrome"></div> [need to remove this]
<div id="safari"></div> [need to remove this]
</body>
body/html クラスが chrome の場合、chrome div のみを表示し、他のすべての div をページから削除します。
<body class="chrome">
<div id="firefox"></div> [need to remove this]
<div id="ie"></div> [need to remove this]
<div id="chrome"></div>
<div id="safari"></div> [need to remove this]
</body>
body/html クラスが空白の場合、IE div のみを表示し、他のすべての div をページから削除します。
<body>
<div id="firefox">text here</div> [need to remove this]
<div id="ie"></div>
<div id="chrome"></div> [need to remove this]
<div id="safari"></div> [need to remove this]
</body>
display:none または visibility:hidden コードを設定したくありません。javascript コードを remove() したい。
これを使ってみました。そのすべての主要なブラウザーで動作します。ブラウザを検出し、display:none; を設定します。他のブラウザ用。CSS 部分のデモは、http: //www.downloadsaga.com/inboxace/で見ることができます。しかし、iframeを使用すると、他のdivのiframeがロードされます。そのためには、表示されていないときに iframe を読み込めないコードが必要です。
<?php require('css_browser_selector.php') ?>
<html class="<?php echo css_browser_selector() ?>">
<head>
<title>Browser Detect</title>
<style type="text/css">
.ie #firefox, .ie #chrome, .ie #opera, .ie #safari {
display:none;
}
.gecko #chrome, .gecko #ie, .gecko #opera, .gecko #safari {
display:none;
}
.win.gecko #chrome, .win.gecko #ie, .win.gecko #opera, .win.gecko #safari {
display:none;
}
.linux.gecko #chrome, .linux.gecko #ie, .linux.gecko #opera, .linux.gecko #safari {
display:none;
}
.opera #firefox, .opera #chrome, .opera #ie, .opera #safari {
display:none;
}
.safari #firefox, .safari #chrome, .safari #ie, .safari #opera {
display:none;
}
.chrome #firefox, .chrome #opera, .chrome #ie, .chrome #safari {
display:none;
}
.opera #opera {
display:block;
}
.chrome #chrome {
display:block;
}
html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($("body").hasClass("gecko")){
$( "#ie" ).remove();
$( "#chrome" ).remove();
$( "#safari" ).remove();
$( "#opera" ).remove();
} else if ($("body").hasClass("chrome")) {
$( "#ie" ).remove();
$( "#firefox" ).remove();
$( "#safari" ).remove();
$( "#opera" ).remove();
} else if ($("body").hasClass("")) {
$( "#chrome" ).remove();
$( "#firefox" ).remove();
$( "#safari" ).remove();
$( "#opera" ).remove();
} else if ($("body").hasClass("safari")) {
$( "#ie" ).remove();
$( "#firefox" ).remove();
$( "#chrome" ).remove();
$( "#opera" ).remove();
} else if ($("body").hasClass("opera")) {
$( "#ie" ).remove();
$( "#firefox" ).remove();
$( "#safari" ).remove();
$( "#chrome" ).remove();
}
});
</script>
</head>
<body class="webkit chrome win">
<div id="#content">
<div id="firefox">
<iframe src="firefox.html" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
</div>
<div id="chrome">
<iframe src="google.html" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
</div>
<div id="ie">
<iframe src="microsoft.html" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
</div>
<div id="opera">
<iframe src="opera.html" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
</div>
<div id="safari">
<iframe src="safari.html" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
</div>
</div>
</body>
</html>
専門家による解決策はありますか?? ここに css_browser_selector.php ファイルがあります。 https://github.com/bastianallgeier/PHP-Browser-Selector