ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

使用a标签无法跳转到指定网页的解决办法

2021-08-07 19:33:08  阅读:199  来源: 互联网

标签:解决办法 www 网页 urls URL let str 跳转 com


  1. 平时HTML中的a标签是我们十分喜爱使用的,但是就是这样的简单基础的标签有时候会出现我们意想不到的问题。

  2. 首先来一段测试,以复现问题,使用一堆url,动态创建多个a标签,撰写如下所示的代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>艾孜尔江的测试页面</title>
</head>

<body>
    <ul id="myid"></ul>
</body>
<script type="text/javascript">
    let urls = [
        "www.baidu.com",
        "www.sogo.com",
        "www.bing.com",
        "www.163.com",
    ];


    let str = '';
    for (let i = 0; i < urls.length; i++) {
        let content = urls[i];
        str += '        <h3>' + ("Page" + i) + '</h3>';
        str += '        <a href="' + urls[i] + '" target=_blank' + '>' + '第' + i + '个' + '</a>';
    }
    document.getElementById("myid").innerHTML = str;
</script>


</html>
  1. 我们以为上面的写法非常正确,URL加进去了,而且我们的创建效果也实现了,页面效果如下:

  2. 但是当我们点击的那一时刻,我们发现页面跳转到 MY_SERVER_IP + / + URL,而不是直接跳转到指定的URL页面。

  3. 经过一番检查,发现原来是没有将URL写规范,只要在所有URL的前面加上 https 我们就可以实现直接跳转到指定页面的需求,最后的代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>艾孜尔江的测试页面</title>
</head>

<body>
    <ul id="myid"></ul>
</body>
<script type="text/javascript">
    let urls = [
        "https://www.baidu.com",
        "https://www.sogo.com",
        "https://www.bing.com",
        "https://www.163.com",
    ];


    let str = '';
    for (let i = 0; i < urls.length; i++) {
        let content = urls[i];
        str += '        <h3>' + ("Page" + i) + '</h3>';
        str += '        <a href="' + urls[i] + '" target=_blank' + '>' + '第' + i + '个' + '</a>';
    }
    document.getElementById("myid").innerHTML = str;
</script>


</html>




作者:艾孜尔江

标签:解决办法,www,网页,urls,URL,let,str,跳转,com
来源: https://www.cnblogs.com/ezhar/p/15112817.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有