根据 Javascript 函数输出显示不同的链接答案

【问题标题】：Show different links based on Javascript function output根据 Javascript 函数输出显示不同的链接
【发布时间】：2015-04-27 07:04:37
【问题描述】：

我正在尝试根据用户在页面上显示不同的可能链接。例如，不允许移动用户向我们的数据库提交数据。我找到了一个检测移动用户的 Javascript 函数，但我无法获得它的输出来指示向用户显示的链接。事实上，当我尝试使用以下代码时，根本没有显示任何链接。

</head>
  <body>
    </div>
    <div id="topcontent">
      <p align="center">
        <div id="banner">
          <p align="center">
            <script>
            function checkMobile(){
              if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                <a href="studyAreas.html">
                Wifi Study Areas</a>
                <a href="displayspeeds.html">
                  View all Speeds</a>
                  <a href="bestlocation.html">
                    Best Speed Near You</a>
                        <a href="squadfree/index.html">
                        About Us</a>
              }
              else{
                <a href="studyAreas.html">
                Wifi Study Areas</a>
                <a href="displayspeeds.html">
                  View all Speeds</a>
                  <a href="bestlocation.html">
                    Best Speed Near You</a>
                    <a href="userEnterInfo.html">
                      Add Speed Data</a>
                        <a href="squadfree/index.html">
                        About Us</a>
              }
            }
            </script>
          </p>
      </div>

      <div id="centercontent">
        <h3 align="center">
          Find the best study space</h3>
          <h1 align="center">
            Check Your Internet Speed With WiFly</h1>
            <p align="center">
              <img src="http://cdn.flaticon.com/png/256/15402.png" alt="wifi" />
            </p>
            <p align="center">
            </p>
      </div>
  </body>

【问题讨论】：

好吧，你不能只在你的 javascript 函数中编写 html 代码。例如，您可以淡入正确的 html 部分，或者用代码填充必要的元素（设置 innerhtml）
@Fank Provost 说的是真的，最重要的是你为什么要在段落标签中添加 div 标签？

标签： javascript html

【解决方案1】：

你不能像这样在你的 javascript 中直接使用 html 代码。

<p id="content" align="center">

</p>

<script>
window.onload = function() {

        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            document.getElementById("content").innerHtml = '<a href="studyAreas.html">...';
        }
        else{
            document.getElementById("content").innerHtml = '<a href="studyAreas.html">...';
        }

}
</script>

这将遵循您当前的方法。如果您只在 2 个块中创建元素并淡入所需的一个，它可能会更好（也更容易）。

<p id="content" align="center">
   <span id="mobile">...</span>

   <span id="desktop">...</span>
</p>

<script>

window.onload = function() {

        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            document.getElementById("desktop").style.display = 'none';
            document.getElementById("mobile").style.display = 'block';
        }
        else{
            document.getElementById("desktop").style.display = 'block';
            document.getElementById("mobile").style.display = 'none';
        }

}
</script>

如果您使用 jquery 并且只需切换元素，这将更加容易。

重要提示：这样您不能确保人们不会将数据发布到您的数据库中。你也应该在你的后端检查这个

更新：正如阿南德在 cmets 中所说 - 你也应该重新考虑你的拳击。您不能在段落内添加 div。如果您直接向它们添加文本，则应该只使用段落。

【讨论】：

【解决方案2】：

你不能直接在 script 标签内渲染 HTML。 ASP.NET Rajor 允许这种语法，但 JavaScript 不允许。

工作演示：http://jsfiddle.net/2tLzrzz8/

您应该根据条件创建 HTML 字符串，然后将该字符串指定为周围容器的innerHTML。为了获得更好的性能，您可以为您的容器提供一个唯一的id。

HTML：

 <p align="center" id="linkContainer">
 </p>

JavaScript：

function checkMobile(){
                var strHtml="";
              if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                strHtml='<a href="studyAreas.html">'
                        + 'Wifi Study Areas</a>'
                        + '<a href="displayspeeds.html">'
                        + 'View all Speeds</a>'
                        + '<a href="bestlocation.html">'
                        + 'Best Speed Near You</a>'
                        + '<a href="squadfree/index.html">'
                        + 'About Us</a>';
              }
              else{
               strHtml= '<a href="studyAreas.html">'
                        + 'Wifi Study Areas</a>'
                        + '<a href="displayspeeds.html">'
                        + 'View all Speeds</a>'
                        + '<a href="bestlocation.html">'
                        + 'Best Speed Near You</a>'
                        + '<a href="userEnterInfo.html">'
                        + 'Add Speed Data</a>'
                        + '<a href="squadfree/index.html">'
                        + 'About Us</a>';
              }

               document.getElementById("linkContainer").innerHTML=strHtml;
            }

//finally call the function.
checkMobile();

【讨论】：

您声明var html，但将html分配给全局strHtml。可能是笔误。