技术问答iframe的使用用法 - 扬州沐宇科技

标签用于在当前 HTML 文档中嵌入另一个 HTML 文档。它创建了一个包含另一个文档的内联框架。 <p>以下是 <iframe> 标签的使用方法：</p> <ol> <li>在 HTML 文档中插入 <iframe> 标签，并设置以下属性：</li> </ol> <ul> <li> <p>src：指定要嵌入的文档的 URL。可以是相对路径或绝对路径。</p> </li> <li> <p>width 和 height：设置 <iframe> 元素的宽度和高度。</p> </li> <li> <p>frameborder：指定是否显示框架周围的边框。0 表示不显示边框，1 表示显示边框。</p> </li> <li> <p>scrolling：指定是否显示滚动条。auto 表示根据内容自动显示滚动条，yes 表示始终显示，no 表示不显示。</p> </li> </ul> <p>示例代码：</p> <pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.example.com"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"300"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">scrolling</span>=<span class="hljs-string">"auto"</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> </code></pre> <ol start="2"> <li>通过 <iframe> 的 name 属性可以为其命名，以便在其他地方引用。这样可以在其他链接或表单目标中使用该名称。</li> </ol> <p>示例代码：</p> <pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.example.com"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"myFrame"</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.example.com"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"myFrame"</span>></span>点击链接在 iframe 中打开<span class="hljs-tag"></<span class="hljs-name">a</span>></span> </code></pre> <ol start="3"> <li>可通过在 <iframe> 中插入其他内容来为其提供备用内容。</li> </ol> <p>示例代码：</p> <pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.example.com"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"300"</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>如果浏览器不支持 iframe，将会显示此段落。<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> </code></pre> <p>需要注意的是，由于安全性考虑，不允许在 <iframe> 中嵌入某些网站的内容，如银行网站等。并且，使用 <iframe> 时应尽量避免跨域问题，即在不同域名下的网页嵌入 <iframe> 可能会受到浏览器的限制。</p> </p> </div> </div> </div> <div class="article_like flex-space"> <div> 上一条：<a href="/ask/67742.html" class="color-text-primary">SOAP是什么东西</a> </div> <div> 下一条：<a href="/ask/11015.html" class="color-text-primary">如何选择java xml的解析库</a> </div> </div> </div> <div class="more-report-wrapper"> <p class="font-size-medium color-text-primary font-semibold">相关问答</p> <ul class="report-list"> <li> <p class="color-text-primary text-ellipsis"> <a target="_blank" class="color-text-primary" href="/ask/67737.html"> iframe标签属性说明详解 </a> </p> </li> <li> <p class="color-text-primary text-ellipsis"> <a target="_blank" class="color-text-primary" href="/ask/35391.html"> iframe的使用用法是什么 </a> </p> </li> <li> <p class="color-text-primary text-ellipsis"> <a target="_blank" class="color-text-primary" href="/ask/17008.html"> IFRAME中的跨域问题如何解决 </a> </p> </li> <li> <p class="color-text-primary text-ellipsis"> <a target="_blank" class="color-text-primary" href="/ask/66624.html"> 鍦╥frame涓紶閫掔綉鍧€鍙傛暟 </a> </p> </li> <li> <p class="color-text-primary text-ellipsis"> <a target="_blank" class="color-text-primary" href="/ask/67669.html"> IFRAME属性及详解 </a> </p> </li> <li> <p class="color-text-primary text-ellipsis"> <a target="_blank" class="color-text-primary" href="/ask/17010.html"> IFRAME的替代方案有哪些 </a> </p> </li> <li> <p class="color-text-primary text-ellipsis"> <a target="_blank" class="color-text-primary" href="/ask/67740.html"> iframe的使用用法 </a> </p> </li> </ul> </div> </div> </div> </main> <footer class="footer"> <div class="section"> <img class="logo-footer" src="/uploads/admin/202411/6736cc5ccd5a0.png" alt="技术问答iframe的使用用法 - 扬州沐宇科技 - 企业官网"> <p class="copyright"> Copyright © 2018-2028 沐宇 | 扬州沐宇网络科技有限公司 | <a target="_blank" class="beian-link" href="https://beian.miit.gov.cn/">苏ICP备2021014570号-7</a> | <img style="display: inline-block; vertical-align: middle; margin-left: 10px;" src="/static/images/gh.png" /> <a target="_blank" class="beian-link" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35010402351499">苏公网安备 99999999999999号</a> </p> </div> </footer>  <div class="contact-service"> <svg class="iconpark-icon"> <use href="#c-headset-one"></use> </svg> <div class="wechat-box"> <img class="wechat" src="/static/images/image-wechat.png" /> <p class="text">扫码添加客服微信</p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6a0e053fd1ad2824d5c6e18ab7a73ded"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>  <div class="login-dialog-wrapper dialog-wrapper" style="display: none"> <div class="login-dialog"> <div class="login-dialog-header"> <img class="logo" src="/static/images/logo.png" /> <svg class="iconpark-icon-close" id="close-login-dialog" onclick="cancelGetLoginSacn()"> <use href="#c-close"></use> </svg> </div> <div class="login-dialog-body">  <div class="login-register-wrapper" style="display: none"> <ul class="tab"> <li data-type="password">密码登录</li> <li data-type="sms">短信登录</li> </ul> <div class="form-wrapper" id="password-login" style="display: none"> <div class="form-item"> <label>账号</label> <div><input id="tel" class="input" maxlength="11" placeholder="请输入手机号" /></div> </div> <div class="form-item"> <label>密码</label> <div class="p-r login-password"> <input class="input" id="pwd" maxlength="15" type="password" placeholder="请输入密码" onkeydown="keyDownSubmit(event, this)" /> <svg class="iconpark-icon" id="preview-closed"> <use href="#preview-close"></use> </svg> <svg class="iconpark-icon" id="preview-opend" style="display: none"> <use href="#preview-open"></use> </svg> </div> </div> <div class="forget-password"> <label class="remember-account cursor-pointer" for="remember-account"> <input type="checkbox" id="remember-account" /> <span>记住我的账号</span> </label> <span class="color-primary cursor-pointer" id="forget-password">忘记密码</span> </div> <p class="error-text p-a" id="error-password" style="display:none"> <svg class="iconpark-icon-error"> <use href="#prohibit"></use> </svg> </p> <button class="login is-space" id="loginBtn">登录</button> <p class="form-desc"> 没有账号？<span class="color-primary cursor-pointer" id="register-now">立即注册</span> </p> <div class="wechat-login-btn-box" onclick="getQrCode()"> <span class="wechat-login-btn">微信登录</span> </div> </div> <div class="form-wrapper" id="sms-login" style="display: none"> <div class="form-item"> <label>手机号</label> <div><input id="tel2" class="input" maxlength="11" placeholder="请输入手机号" /></div> </div> <div class="form-item"> <label>验证码</label> <div class="p-r"> <input id="validateCode" class="input verification-code" type="text" placeholder="请输入验证码" maxlength="6" onkeydown="keyDownSubmit(event, this)" /> <p class="send-code"> <input type="button" value="发送验证码" id="send-code" onClick="sendSmsBtn('tel2', 'captcha1', 'error-code',this)" /> </p> </div> </div> <p class="error-text" id="error-code" style="display:none"> <svg class="iconpark-icon-error"> <use href="#prohibit"></use> </svg>手机号或验证码错误，请重新输入 </p> <div style="height: 26px"></div> <div id="captcha1" class="aliyun-captcha"></div> <button class="login" id="loginBtn2">登录/注册</button> <p class="form-desc">未注册手机号验证后将自动登录</p> <div class="wechat-login-btn-box"> <span class="wechat-login-btn" onclick="getQrCode()">微信登录</span> </div> </div> <div class="agreement-policy"> <p> 登录即表示同意<a class="link" target="_blank" href="/Home/UserAgreement">用户协议</a>和<a class="link" target="_blank" href="/Home/PrivacyAgreement">个人信息保护政策</a> </p> </div> </div>  <div class="forget-password-wrapper" style="display: none"> <div> <span class="back-login" id="back-login" onclick="cancelGetLoginSacn()"> <svg class="iconpark-icon"> <use href="#c-left"></use> </svg>返回登录 </span> </div> <ul class="tab"> <li class="active">找回密码</li> </ul> <div class="form-wrapper" id="retrieve-password"> <div class="form-item"> <label>手机号</label> <div><input id="tel3" class="input" maxlength="11" placeholder="请输入手机号" /></div> </div> <div class="form-item"> <label>验证码</label> <div class="p-r"> <input class="input verification-code" type="text" id="validateCode2" placeholder="请输入验证码" maxlength="6" /> <p class="send-code"> <input type="button" value="发送验证码" id="send-code2" onClick="sendSmsBtn('tel3', 'captcha2', 'error-retrieve-password',this)" /> </p> </div> </div> <div id="captcha2" class="aliyun-captcha"></div> <div class="form-item"> <label>设置新密码</label> <div><input class="input" type="password" id="newPassword" maxlength="15" show-password placeholder="请输入6-15位新密码" /></div> </div> <p class="error-text" id="error-retrieve-password" style="display:none"> <svg class="iconpark-icon-error"> <use href="#prohibit"></use> </svg>手机号或验证码错误，请重新输入 </p> <button class="login" id="change-password-btn">确认登录</button> </div> <div class="agreement-policy"> <p> 登录即表示同意<a class="link" target="_blank" href="/Home/UserAgreement">用户协议</a>和<a class="link" target="_blank" href="/Home/PrivacyAgreement">个人信息保护政策</a> </p> </div> </div>  <div class="set-password-success-wrapper" style="display: none"> <div> <svg class="iconpark-icon-success"> <use href="#c-success"></use> </svg> <p class="success-tips">设置新密码成功</p> <p class="success-desc"><span id="countdown"></span>s 后进入数思AI</p> </div> <button class="login" onclick="location.href='https://chat.shusi.cn'">开始使用</button> </div>  <div class="wechat-login-wrapper" style="display: none;" id="wxlogin"> <div class="back-login-box font-size-0"> <span class="back-login" onclick="cancelGetLoginSacn()"> <svg class="iconpark-icon"> <use href="#c-left"></use> </svg>返回登录 </span> </div> <div class="text-center"> <div class="wechat-qrcode"> <img id="qrCodeImgId" width="220" height="220" /> </div> <p class="wechat-login-desc">微信扫码关注公众号即可登录</p> </div> <div class="agreement-policy"> <p> 登录即表示同意<a class="link" title="用户协议" target="_blank" href="./userAgreement.html">用户协议</a>和<a class="link" target="_blank" title="个人信息保护政策" href="./privacyAgreement.html">个人信息保护政策</a> </p> </div> </div> </div> </div> </div>  <div class="binding-wechat-dialog-wrapper dialog-wrapper" style="display: none" id="bindwx"> <div class="binding-wechat-dialog"> <div class="relative leading-none"> <p class="font-medium font-size-medium color-text-primary">绑定微信</p> <svg class="iconpark-icon-close" id="close-binding-wechat" onclick="cancelGetLoginSacn()"> <use href="#c-close"></use> </svg> </div> <div class="binding-wechat-desc"> <p>您的微信号未绑定数思</p> <p>可选择绑定已有账号或创建新账号</p> </div> <div class="button-group"> <div> <button type="button" class="el-button el-button--primary el-button--medium binding-old-account"> <span>绑定已有账号</span> </button> </div> <div> <button type="button" class="el-button el-button--default el-button--medium binding-new-account"> <span>创建新账号</span> </button> </div> </div> </div> </div>  <div class="binding-account-dialog-wrapper dialog-wrapper" style="display: none;"> <div class="binding-account-dialog"> <div class="binding-account-dialog-header relative"> <p class="binding-title">欢迎回来</p> <p class="font-size-small color-text-secondary"> 没有账号？<span class="cursor-pointer color-primary binding-new-account">去注册</span> </p> <svg class="iconpark-icon-close" id="close-binding-account" onclick="cancelGetLoginSacn()"> <use href="#c-close"></use> </svg> </div> <div class="form-wrapper"> <div class="form-item"> <label>手机号</label> <div> <input class="input" maxlength="11" placeholder="请输入手机号" id="bindwxTel" /> </div> </div> <div class="form-item"> <label>验证码</label> <div class="p-r"> <input class="input verification-code" type="text" placeholder="请输入验证码" maxlength="6" id="bindwxValidateCode" onkeydown="keyDownSubmit(event, this)" /> <p class="send-code"> <input type="button" value="发送验证码" id="send-code-bindwx" onClick="sendSmsBtn('bindwxTel', 'captcha3', 'error-bindwx',this)" /> </p> </div> </div> <p class="error-text p-a" id="error-bindwx" style="display: none;"> <svg class="iconpark-icon-error"> <use href="#prohibit"></use> </svg>手机号或验证码错误，请重新输入 </p> <div id="captcha3" class="aliyun-captcha"></div> <button class="el-button el-button--primary binding-account-button" onclick="bindWx()"> <span>绑定</span> </button> </div> </div> </div>  <div class="create-account-dialog-wrapper dialog-wrapper" style="display: none;"> <div class="create-account-dialog"> <div class="binding-create-dialog-header relative"> <p class="binding-title">欢迎注册数思</p> <p class="font-size-small color-text-secondary"> 已注册过账号，<span class="cursor-pointer color-primary binding-old-account">去绑定</span> </p> <svg class="iconpark-icon-close" id="close-create-account" onclick="cancelGetLoginSacn()"> <use href="#c-close"></use> </svg> </div> <div class="form-wrapper"> <div class="form-item"> <label>手机号</label> <div> <input class="input" maxlength="11" placeholder="请输入手机号" id="wxregisterTel" /> </div> </div> <div class="form-item"> <label>验证码</label> <div class="p-r"> <input class="input verification-code" type="text" placeholder="请输入验证码" maxlength="6" onkeydown="keyDownSubmit(event, this)" id="wxregisterValidateCode" /> <p class="send-code"> <input type="button" value="发送验证码" id="send-code-wxregister" onClick="sendSmsBtn('wxregisterTel', 'captcha4', 'error-registerwx',this)" /> </p> </div> </div> <div id="captcha4" class="aliyun-captcha"></div> <div class="form-item"> <label>设置密码</label> <div> <input class="input" type="password" maxlength="15" placeholder="请输入6-15位新密码" id="wxregisterPwd" /> </div> </div> <p class="error-text p-a" id="error-registerwx" style="display: none;"> <svg class="iconpark-icon-error"> <use href="#prohibit"></use> </svg>手机号或验证码错误，请重新输入 </p> <button class="el-button el-button--primary binding-account-button" onclick="registerWx()"> <span>注册</span> </button> </div> <div class="agreement-policy"> <p> 登录即表示同意<a class="link" title="用户协议" target="_blank" href="./userAgreement.html">用户协议</a>和<a class="link" target="_blank" title="个人信息保护政策" href="./privacyAgreement.html">个人信息保护政策</a> </p> </div> </div> </div> <script src="/static/js/svg.js"></script> <script src="/static/js/jquery-2.0.2.min.js?v=1.92"></script> <script src="/static/js/common.js?v=2.5"></script> <script> let currentUser = ''; let jumpUrl = ''; $(function () { let timer = null $(document).on("scroll", function () { if ($(document).scrollTop() > 120) { $("header").addClass("shrink"); } else { $("header").removeClass("shrink"); } }); $('.login-btn').click(function () { if (currentUser != null && currentUser != undefined && currentUser != "" && currentUser != "undefined") { location.href = "https://chat.shusi.cn"; } else { var map = { password: 0, sms: 1 } var loginDialogTab = getCookie('loginDialogTab') || 'sms' var tabs = $(".login-register-wrapper .tab>li") $(".forget-password-wrapper").hide(); $(".set-password-success-wrapper").hide(); $('.login-dialog-wrapper').show(); $(".login-register-wrapper .tab>li").eq(map[loginDialogTab]).addClass('active'); $('#' + loginDialogTab + '-login').show() $(".login-register-wrapper").show(); } }) $('.iconpark-icon-close').click(function (e) { $(".login-register-wrapper .tab>li").removeClass("active") $('.login-dialog-wrapper').hide() $("#password-login").hide() $("#sms-login").hide() clearTimeout(timer) initData();//初始化 }) $('.login-dialog').click(function (e) { $("#change-password-btn").attr("disabled", false); $("#send-code2").attr("disabled", false); $("#send-code").attr("disabled", false); $("#loginBtn2").attr("disabled", false); $("#loginBtn").attr("disabled", false) ; e.stopPropagation() }) function changePasswordFunc() { $(".login-register-wrapper").hide() $(".forget-password-wrapper").hide() $(".set-password-success-wrapper").show() $("#countdown").html(3) countDown(3) } $(".common-problem .issue").click(function () { $(this).parent().toggleClass('active') $(this).next().slideToggle('fast') }) function countDown(count) { timer = setTimeout(function () { count-- if (count > 0) { $("#countdown").html(count) countDown(count) } else { location.href = "https://chat.shusi.cn" } }, 1000) } function loginSuccess() { //location.replace(""); if (jumpUrl != '') location.href = jumpUrl; else location.href = "https://chat.shusi.cn"; } function initData() { document.getElementById('error-password').style.display = 'none'; document.getElementById('error-code').style.display = 'none'; $('.input').val(''); var tel = getCookie("ShuSiSaveUserName"); if (tel != null && tel != undefined && tel != "" && tel != "undefined") { $("#tel").val(tel) $("#remember-account").prop("checked", true); } else { $("#tel").val(''); $("#remember-account").prop("checked", false); } $('#captcha1').empty(); $('#captcha2').empty(); $('#captcha3').empty(); $('#captcha4').empty(); } function setCookie(cookiename, cookievalue, hours) { var date = new Date(); date.setTime(date.getTime() + Number(hours) * 3600 * 1000); document.cookie = cookiename + "=" + cookievalue + "; path=/;expires = " + date.toGMTString(); } function getCookie(cookiename) { var result; var mycookie = document.cookie; var start2 = mycookie.indexOf(cookiename + "="); if (start2 > -1) { start = mycookie.indexOf("=", start2) + 1; var end = mycookie.indexOf(";", start); if (end == -1) { end = mycookie.length; } result = unescape(mycookie.substring(start, end)); } return result; } //接口点击事件 //密码登录 $("#loginBtn").click(function () { $("#loginBtn").attr("disabled", true); var telephone = $("#tel").val(); var password = $("#pwd").val(); var _tmpdata = {}; _tmpdata.tel = telephone; _tmpdata.pwd = password; axios({ method: "POST", url: "/Home/UserLogin", data: _tmpdata }).then(function (response) { var data = response.data; if (data.code == '200') { if ($("#remember-account").is(":checked")) { setCookie("ShuSiSaveUserName", telephone, 24 * 30); } else { setCookie("ShuSiSaveUserName", ""); } $("#loginBtn").attr("disabled", false); document.getElementById('error-password').style.display = 'none'; $('.iconpark-icon-close').click(); loginSuccess(); return; } $("#loginBtn").attr("disabled", false); var tmpErrMsg = document.getElementById('error-password'); document.getElementById('error-password').style.display = 'block'; tmpErrMsg.innerHTML = data.msg; //('#error-password'). //alert(data.msg); }).catch(err => { $("#loginBtn").attr("disabled", false); //console.log(err); //_this.$alert("发生错误," + err.msg, "错误", { type: 'error' }); }); }) //验证码登录 $("#loginBtn2").click(function () { $("#loginBtn2").attr("disabled", true); var telephone = $("#tel2").val(); var validateCode = $("#validateCode").val(); var _tmpdata = {}; _tmpdata.tel = telephone; _tmpdata.validateCode = validateCode; axios({ method: "POST", url: "/Home/UserLoginByCode", data: _tmpdata }).then(function (response) { var data = response.data; if (data.code == '200') { $("#loginBtn2").attr("disabled", false); document.getElementById('error-code').style.display = 'none'; $('.iconpark-icon-close').click(); loginSuccess(); return; } $("#loginBtn2").attr("disabled", false); var tmpErrMsg = document.getElementById('error-code'); document.getElementById('error-code').style.display = 'block'; tmpErrMsg.innerHTML = data.msg; //('#error-password'). //alert(data.msg); }).catch(err => { $("#loginBtn2").attr("disabled", false); //console.log(err); //_this.$alert("发生错误," + err.msg, "错误", { type: 'error' }); }); }) //发送验证码 //$('#send-code').click(function () { // $("#send-code").attr("disabled", true); // settime(this, 30); // var telephone = $("#tel2").val(); // var _tmpdata = {}; // _tmpdata.tel = telephone; // axios({ // method: "POST", // url: "/Home/SendCode", // data: _tmpdata // }).then(function (response) { // var data = response.data; // if (data.code == '200') { // $("#send-code").attr("disabled", false); // document.getElementById('error-code').style.display = 'none'; // return; // } // $("#send-code").attr("disabled", false); // var tmpErrMsg = document.getElementById('error-code'); // document.getElementById('error-code').style.display = 'block'; // tmpErrMsg.innerHTML = data.msg; // //('#error-password'). // //alert(data.msg); // }).catch(err => { // $("#send-code").attr("disabled", false); // //console.log(err); // //_this.$alert("发生错误," + err.msg, "错误", { type: 'error' }); // }); //}); //$('#send-code2').click(function () { // $("#send-code2").attr("disabled", true); // settime(this, 60); // var telephone = $("#tel3").val(); // var _tmpdata = {}; // _tmpdata.tel = telephone; // axios({ // method: "POST", // url: "/Home/SendCode", // data: _tmpdata // }).then(function (response) { // var data = response.data; // if (data.code == '200') { // $("#send-code2").attr("disabled", false); // document.getElementById('error-retrieve-password').style.display = 'none'; // return; // } // $("#send-code2").attr("disabled", false); // var tmpErrMsg = document.getElementById('error-retrieve-password'); // document.getElementById('error-retrieve-password').style.display = 'block'; // tmpErrMsg.innerHTML = data.msg; // //('#error-password'). // //alert(data.msg); // }).catch(err => { // $("#send-code2").attr("disabled", false); // //console.log(err); // //_this.$alert("发生错误," + err.msg, "错误", { type: 'error' }); // }); //}); $('#change-password-btn').click(function () { $("#change-password-btn").attr("disabled", true); var telephone = $("#tel3").val(); var validateCode = $("#validateCode2").val(); var newPassword = $("#newPassword").val(); var _tmpdata = {}; _tmpdata.tel = telephone; _tmpdata.validateCode = validateCode; _tmpdata.newPassword = newPassword; _tmpdata.newPassword2 = newPassword; axios({ method: "POST", url: "/Home/ForgetPwd", data: _tmpdata }).then(function (response) { var data = response.data; if (data.code == '200') { $("#change-password-btn").attr("disabled", false); document.getElementById('error-retrieve-password').style.display = 'none'; changePasswordFunc(); return; } $("#change-password-btn").attr("disabled", false); var tmpErrMsg = document.getElementById('error-retrieve-password'); document.getElementById('error-retrieve-password').style.display = 'block'; tmpErrMsg.innerHTML = data.msg; //('#error-password'). //alert(data.msg); }).catch(err => { $("#change-password-btn").attr("disabled", false); //console.log(err); //_this.$alert("发生错误," + err.msg, "错误", { type: 'error' }); }); }); $('#loginOut').click(function () { axios({ method: "Get", url: "/Home/UserSignOut" }).then(function (response) { location.replace(""); }).catch(err => { /*$("#loginBtn2").attr("disabled", false);*/ //console.log(err); //_this.$alert("发生错误," + err.msg, "错误", { type: 'error' }); }); }) window.onload = function () { var tel = getCookie("ShuSiSaveUserName"); if (tel != null && tel != undefined && tel != "" && tel != "undefined") { $("#tel").val(tel) $("#remember-account").prop("checked", true); } else { $("#tel").val(''); $("#remember-account").prop("checked", false); } } }) //function settime(obj, countdown) { // if (countdown == 0) { // obj.classList.remove('is-send') // obj.removeAttribute("disabled"); // obj.value = "发送验证码"; // countdown = 60; // return; // } else { // obj.classList.add('is-send') // obj.setAttribute("disabled", true); // obj.value = countdown + "s后可重发"; // countdown--; // } // setTimeout(function () { // settime(obj, countdown) // }, 1000) //} </script> <script> $(function () { //绑定微信发送验证码 //$('#send-code-bindwx').click(function () { // $("#send-code-bindwx").attr("disabled", true); // settime(this, 30); // var telephone = $("#bindwxTel").val(); // var _tmpdata = {}; // _tmpdata.tel = telephone; // axios({ // method: "POST", // url: "/Home/SendCode", // data: _tmpdata // }).then(function (response) { // var data = response.data; // if (data.code == '200') { // $("#send-code-bindwx").attr("disabled", false); // document.getElementById('error-bindwx').style.display = 'none'; // return; // } // $("#send-code-bindwx").attr("disabled", false); // var tmpErrMsg = document.getElementById('error-bindwx'); // document.getElementById('error-bindwx').style.display = 'block'; // tmpErrMsg.innerHTML = data.msg; // }).catch(err => { // $("#send-code-bindwx").attr("disabled", false); // }); //}); //绑定微信注册发送验证码 //$('#send-code-wxregister').click(function () { // $("#send-code-wxregister").attr("disabled", true); // settime(this, 30); // var telephone = $("#wxregisterTel").val(); // var _tmpdata = {}; // _tmpdata.tel = telephone; // axios({ // method: "POST", // url: "/Home/SendCode", // data: _tmpdata // }).then(function (response) { // var data = response.data; // if (data.code == '200') { // $("#send-code-wxregister").attr("disabled", false); // document.getElementById('error-registerwx').style.display = 'none'; // return; // } // $("#send-code-wxregister").attr("disabled", false); // var tmpErrMsg = document.getElementById('error-registerwx'); // document.getElementById('error-registerwx').style.display = 'block'; // tmpErrMsg.innerHTML = data.msg; // }).catch(err => { // $("#send-code-wxregister").attr("disabled", false); // }); //}); //弹窗关闭事件 $("#close-login-dialog").click(function (e) { settime(document.getElementById('send-code'), 0,null); settime(document.getElementById('send-code2'), 0); settime(document.getElementById('send-code-bindwx'), 0); settime(document.getElementById('send-code-wxregister'), 0); //清除定时任务 window.clearInterval(t); //清空图片 $('#qrCodeImgId').remove(); $(".wechat-qrcode").append("<img id='qrCodeImgId' width='220' height='220' />"); }); }); //用户openid var openId; // 存储二维码标识,用于验证是否扫码成功 var sceneStr; //轮询t var t; // 获取登录二维码 function getQrCode() { $.ajax({ url: '/index/getQrCode', success: function (data) { console.log(data.data.QrCodeUrl); if (data.code == 200) { sceneStr = data.data.SceneStr; $('#qrCodeImgId').attr('src', data.data.QrCodeUrl); $('#wxlogin').css('display', 'block'); t = window.setInterval(getLoginSacn, 2000); } } }); }; // 扫码成功 function getLoginSacn() { $.ajax({ url: '/index/GetLoginSacn', data: { "eventKey": sceneStr }, success: function (data) { console.log(data); //200扫码关注成功 if (data.code == 200) { //清除定时任务 window.clearInterval(t); //未绑定微信操作 if (data.data.IsBindWx == false) { openId = data.data.OpenId; console.log(openId); $('#wxlogin').css('display', 'none'); $('#bindwx').css('display', 'block'); } //用户绑定微信直接登入 else { wxLogin(data.data.OpenId); } } //二维码过期 else if (data.code == 300) { //显示二维码过期图片 //清除定时任务 window.clearInterval(t); } } }); }; // openId 微信登入 function wxLogin(openId) { $.get('/Wx/WxLogin', { openId: openId }, function (data) { if (data.code == 200) { //跳转网址 location.href = "https://chat.shusi.cn"; } }) }; //微信绑定已有账号提交 function bindWx() { var telephone = $("#bindwxTel").val(); var validateCode = $("#bindwxValidateCode").val(); var _tmpdata = {}; _tmpdata.openId = openId; _tmpdata.telePhone = telephone; _tmpdata.validateCode = validateCode; axios({ method: "POST", url: "/Wx/AccountBind", data: _tmpdata }).then(function (response) { var data = response.data; console.log(data); if (data.code == '200') { location.href = "https://chat.shusi.cn"; } var tmpErrMsg = document.getElementById('error-bindwx'); document.getElementById('error-bindwx').style.display = 'block'; tmpErrMsg.innerHTML = data.msg; }).catch(err => { }); }; //微信创建账号提交 function registerWx() { var tel = $("#wxregisterTel").val(); var validateCode = $("#wxregisterValidateCode").val(); var pwd = $("#wxregisterPwd").val(); var _tmpdata = {}; _tmpdata.tel = tel; _tmpdata.pwd = pwd; _tmpdata.validateCode = validateCode; axios({ method: "POST", url: "/Wx/RegisterBind", data: _tmpdata }).then(function (response) { var data = response.data; console.log(data); if (data.code == '200') { location.href = "https://chat.shusi.cn"; } var tmpErrMsg = document.getElementById('error-registerwx'); document.getElementById('error-registerwx').style.display = 'block'; tmpErrMsg.innerHTML = data.msg; }).catch(err => { }); }; //微信登入弹窗关闭方法 function cancelGetLoginSacn() { //清除定时任务 window.clearInterval(t); //清空图片 $('#qrCodeImgId').remove(); $(".wechat-qrcode").append("<img id='qrCodeImgId' width='155' height='155' />"); }; //settime //function settime(obj, countdown) { // if (countdown == 0) { // obj.classList.remove('is-send') // obj.removeAttribute("disabled"); // obj.value = "发送验证码"; // countdown = 60; // return; // } else { // obj.classList.add('is-send') // obj.setAttribute("disabled", true); // obj.value = countdown + "s后可重发"; // countdown--; // } // setTimeout(function () { // settime(obj, countdown) // }, 1000) //} </script> <script> let currentUser2 = ''; function keyDownSubmit(e, ele) { var evt = window.event || e; if (evt.keyCode == 13 && ele.value) { //回车事件 switch (ele.id) { case 'pwd': $("#loginBtn").click() break; case 'validateCode': $("#loginBtn2").click() break; } // 验证登陆 /* console.log('验证登陆的方法');*/ } } </script> </body> </html>