Mailto适用于Firefox,但不适用于Chrome,有时也适用于Internet Explorer

时间:2016-12-11 05:31:51

标签: javascript html google-chrome internet-explorer browser

我是HTML / CSS / JavaScript的初学者。我正在做一个最终项目,我已经完成了所有工作,包括移动页面。在我的网页中,我创建了一个电子邮件表单,如果用户希望与我联系,可以填写该表单。一旦他们点击了"提交"按钮,客户端电子邮件应用程序(outlook或等效)将打开并填充在网页上输入的信息字段。这在Mozilla Firefox中运行良好,但是当我切换到其他任何东西时,我得到了混合的结果。有时国际米兰探险者会工作,然后突然间它不会。 Chrome会随机工作一次,然后再也不会。有人可以告诉我,我错过了什么?以下是我的代码:

HTML:

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

<head>
<meta charset="utf-8">
<title>Welcome To MyHomepage</title>
<link rel="shortcut icon" href="../../IMG/clipart.png">
<link rel="stylesheet" href="../../CSS/normalize.css">
<link rel="stylesheet" href="../../CSS/main.css">
<script src="../../js/Javascript.js"></script>
</head>

<body>

<header>

<div id="leftheader">
<img id="leftpic"src="../../IMG/datad.jpg" alt="Data Defense">
</div>
<div id="rightheader">
<img id="righthpic"src="../../IMG/datad.jpg" alt="Data Defense">
</div>
<div id="midhead">
<h2>Welcome to the Home Page of My Name</h2>
<h3 class="shadow">Security Is Everyone's Responsibility!!!</h3>
<h4 class="contact"><a href="../../HTML/contact.html">Contact Me Now!!!</a></h4>
</div>

</header>


    <main>
<div class="backcolor">

    <ul class="navbar"><!--top-level-menu-->
      <li id="firstnav" ><a href="../../index.html">Home</a>
      <ul class="dropdown-content"><!--2nd-level-menu-->
        <li><a href="../../HTML/JQUERY/mobile.html">JQUERY</a></li>
     </ul>
    </li>

  <li id="secnav"><a href="../../HTML/experience.html">Experience</a>
  <ul class="dropdown-content"><!--2nd-level-menu-->
        <li><a href="../Experience/CExperience.html">Civilian</a></li>
        <li><a href="../Experience/MExperience.html">Military</a></li>
     </ul>
     </li>

  <li id="thirdnav" ><a href="../../HTML/about.html">About Me</a>
    <ul class="dropdown-content"><!--2nd-level-menu-->
        <li><a href="../../HTML/Aboutme/Travels.html">My Travels</a>

            <ul class="dropdown-extension"><!--3rd-level-menu-->
                <li><a href="../../HTML/Aboutme/Travels/Travels.html">CONUS</a></li>
                <li><a href="../../HTML/Aboutme/Travels/TravelsOCO.html">OCONUS</a></li>

            </ul>

        </li>
        <li><a href="../../HTML/Aboutme/Education.html">Education</a></li>
        <li><a href="../../HTML/Aboutme/Hobbies.html">Hobbies</a></li>
        <li><a href="../../HTML/Aboutme/Special.html">Sepcial Projects<a/></li>
        <li><a href="../../HTML/Aboutme/Soceities.html">Soceities</a></li>
    </ul>

  </li>

  <li id="fourthnav"><a href="../../HTML/volunteer.html">Volunteer Work</a></li>

  <li id="fifthnav"><a href="../../HTML/skills.html">Skills</a></li>

  <li id="sixthnav"><a href="../../HTML/goals.html">Goals</a>

        <ul class="dropdown-content"><!--2nd-level-menu-->
            <li><a href="../../HTML/Goals/GoalsST.html">Short Term</li>
            <li><a href="../../HTML/Goals/GoalsLT.html">Long Term</li>
        </ul>
  </li>

   <li id="lastnav" class="active"><a href="../../HTML/contact.html">Contact Me</a>
        <ul id="lastnav"class="dropdown-content"><!--2nd-level-menu-->

            <li><a href="../../HTML/Contact/phone.html">Phone</a></li>

            <li><a href="../../HTML/Contact/email.html" class="sub-active">Email</a>

                    <ul class="dropdown-extension1"><!--3rd-level-menu-->
                        <li><a href="../../HTML/Contact/webemail.html">Web Email<a></li>
                    </ul>
            </li>
        </ul>
  </li>

</ul> 
</div>

<div id="mainsec">

   <div id="leftsec">
   this is a test
   </div>

<div id="rightsec">
   this is a test
   </div>

      <div id="midsec">
     <div class="contact-section1">

     <h3 id="quest1">
     How to Contact me?
     </h3>

     <h4  id="answer1" class="shadow1">
    You can contact me by filling out the information below.
    Please give me 24-72 hours to reply back.
    </h4>

    <h4>Please note, clicking "Submit" will open the email application
on your device!</h4>

    </div>

    <div id="body">

     <div id="section">
     <form id="email_form" name="email_form" action= "sent/sent.html" method="get">

    <label for="email_address1"id="label">Email Address:</label>
    <input type="text" id="email_address1" name="email_address1"</label>
    <span id="email_address1_error">*</span><br><br>

    <label for="emal_address2"id="label">Re=Enter Email Address:</label>
    <input type="text" id="email_address2" name="emaill_address2">
    <span id="email_address2_error">*</span><br><br>

    <label for="name"id="label">Your Name:</label>
    <input type="text" id="name" name="name">
    <span id="name_error">*</span><br><br>

    <label for="subject"id="label">Subject:</label>
    <input type="text" id="subject" name="subject">
    <span id="subject_error">*</span><br><br>

    <label for="message" id="label">Message:</label>
    <textarea type="text" id="message"  tabindex="3"></textarea>
    <span id="message_error">*</span><br><br>

    <label id="label">&nbsp;</label>

    <input type="button" id="join_list" value="Submit"> 

    </form>
    </div>
    </div>
    <h4 class="disclaimer" id="shadowtext">If you do not wish to use your email application, please <a href="../../HTML/Contact/webemail.html" id="shadowtext">click here</a>
to go to the web page email application.</h4>
    </div>

     <div class="contactemail-section2">

    </div>

    </div>
    </div>

    </div>

    </main>
    </body>
    <footer>
        <p>&copy; 2016, My Name All Rights Reserved.</p>
    </footer>
    </html>

JavaScript的:

    var $=function(id){

    return document.getElementById(id);
}
var joinList=function (){
    var emailAddress1=$("email_address1").value;
    var emailAddress2=$("email_address2").value;
    var Name=$("name").value;
    var Subject=$("subject").value;
    var Message=$("message").value;
    var isValid=true;
    var Toemail="I have removed the email address for this post";
    var CCemail="I have removed the email address for this post"";


 Message=Message+"%0D%0A"+"%0D%0A"+"%0D%0A"+"From,"+" %0D%0A"+ Name + "%0D%0A"+emailAddress1;


     if(emailAddress1=="")
    {
        $("email_address1_error").firstChild.nodeValue="This feild is required.";
        isValid=false;
    }
    else
    {
        $("email_address1_error").firstChild.nodeValue="";
    }

     if(emailAddress2=="")
     {
        $(email_address2_error).firstChild.nodeValue="This feild is required.";
        isValid=false;
    }
    else if (emailAddress1!==emailAddress2)
    {
        $(email_address2_error).firstChild.nodeValue="The email addresses must match";
        isValid=false;
    }
    else
    {
        $("email_address2_error").firstChild.nodeValue="";
    }

    if(Name=="")
    {
        $("name_error").firstChild.nodeValue="This feild is required.";
        isValid=false;
    }
    else
    {
        $("name_error").firstChild.nodeValue="";
    }
    if(Subject=="")
    {
        $("subject_error").firstChild.nodeValue="This feild is Required";
        isValid=false;
    }
    else
    {
        $("subject_error").firstChild.nodeValue="";
    }
    if(Message=="")
     {
        $("message_error").firstChild.nodeValue="This feild is requried";
        isValid=false;
    }
    else
    {
        $("message_error").firstChild.nodeValue="";
    }

    if (isValid)
    {

    var mailto_link = 'mailto:' + Toemail + '?cc=' + CCemail + '&subject=' + Subject + '&body=' + Message;

    window.open('sent.html',"_self");
   win = window.open(mailto_link, 'sent.html');
        if (win && win.open && !win.closed) 
        {   
        win.close();
        }

    }   

}
window.onload=function()
{
    $("join_list").onclick=joinList;
    $("email_address1").focus();    
}

我没有添加我的CSS文件,因为我认为不需要它,除了我有很多规则在那里它将无法破译。如果你真的需要它,那么我会发布它。

0 个答案:

没有答案