首頁手記 HTML Mailto 使用手記

HTML Mailto 使用手記

標簽：

Html/CSS

对于mailto使用的两种方法
第一种为直接使用a标签href中添加mailto属性
第二种为使用input标签button click触发事件达成mailto效果

<!DOCTYPE html>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/href.js" ></script>
<html>
    <head>
        <meta charset="UTF-8">
        <title>href.html</title>
    </head>
    <body>
        <p>hello href</p>
        <a href="#a1">alink1</a>
        <ul>
            <li><a href="a_link1.html" target="frameone" name="a1">a_link1</a></li>
            <li><a href="a_link2.html" target="_top">a_link2</a></li>
            <li>
                <a href="mailto:[email protected][email protected]
                    &[email protected]&subject=mail_link_test&body=test
                    %success!">mailto_a1
                </a>
            </li>
        </ul>
        <ul>
            <li><input type="text" name="name" placeholder="Name"/></li>
            <li><input type="text" name="email_address" placeholder="Email Address"/></li>
            <li><input type="text" name="phone_number" placeholder="Phone Number"/></li>
            <li><input type="text" name="message" placeholder="Message"/></li>
            <li>
                <button id="mainto_button" onclick="sendEmail()">Submit</button>
                <a hidden="hidden" name="mailto" href="mailto:[email protected]?
                    [email protected]&[email protected]&subject=My Information"></a>
            </li>
        </ul>
        <p></p>
        <p></p>
    </body>
</html>

href.js

function sendEmail(){
    var href = document.getElementsByName("mailto")[0].attributes[2].value;
    var name = document.getElementsByName("name")[0].value;
    var email_address = document.getElementsByName("email_address")[0].value;
    var phone_number = document.getElementsByName("phone_number")[0].value;
    var message = document.getElementsByName("message")[0].value;
    document.getElementsByName("mailto")[0].getAttributeNode("href").value = href 
        + "&body=Name : " + name + "%0a%0d"
        + "Email Address : " + email_address + "%0a%0d"
        + "Phone Number : " + phone_number + "%0a%0d"
        + "Message: " + message;
    alert(document.getElementsByName("mailto")[0].getAttributeNode("href").value);
    document.getElementsByName("mailto")[0].click();
};

點擊查看更多內容