js关闭浏览器的tab页(兼容)

由于在脚本中使用了 window.close(), 当前非弹出窗口在最新版本的chrome和firefox里总是不能关闭,而在 IE中是可以关闭的 。

      在console中弹出提示”Scripts may close only the windows that were opened by it” (脚本只能关闭它所打开的窗口),[如下图所示] , 不明白是什么原因。

首先,什么是非弹出窗口呢?

      非弹出窗口,即是指(opener=null 及 非window.open()打开的窗口,比如URL直接输入的浏览器窗体, 或由其它程序调用产生的浏览器窗口)。

其次,window.close() 怎么理解呢?

 

由 https://developer.mozilla.org/en-US/docs/Web/API/window.close 可知:

Closes the current window, or the window on which it was called.
When this method is called, the referenced window is closed.

This method is only allowed to be called for windows that were opened by a script using thewindow.open() method. If the window was not opened by a script, the following error appears in the JavaScript Console: Scripts may not close windows that were not opened by script.

Examples

Closing a window opened with window.open()

This example demonstrates how to use this method to close a window opened by script callingwindow.open().

<script type="text/javascript">
//Global var to store a reference to the opened window
var openedWindow;

function openWindow()
{
  openedWindow = window.open('moreinfo.htm');
}

function closeOpenedWindow()
{
  openedWindow.close();
}
</script>

Closing the current window

When you call the window object’s close() method directly, rather than calling close() on a windowinstance, the browser will close the frontmost window, whether your script created that window or not.

<script type="text/javascript">
function closeCurrentWindow()
{
  window.close();
}
</script>

在某些实际应用中,window.close() and self.close() 是不能关闭非弹出窗口(opener=null及非window.open()打开的窗口)。

方案一【推荐,亲身测试有效!!】:

function closeWindows() {
         var browserName = navigator.appName;
         var browserVer = parseInt(navigator.appVersion);
         //alert(browserName + " : "+browserVer);

         //document.getElementById("flashContent").innerHTML = "<br>&nbsp;<font face='Arial' color='blue' size='2'><b> You have been logged out of the Game. Please Close Your Browser Window.</b></font>";

         if(browserName == "Microsoft Internet Explorer"){
             var ie7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false;  
             if (ie7)
             {  
               //This method is required to close a window without any prompt for IE7 & greater versions.
               window.open('','_parent','');
               window.close();
             }
            else
             {
               //This method is required to close a window without any prompt for IE6
               this.focus();
               self.opener = this;
               self.close();
             }
        }else{  
            //For NON-IE Browsers except Firefox which doesnt support Auto Close
            try{
                this.focus();
                self.opener = this;
                self.close();
            }
            catch(e){

            }

            try{
                window.open('','_self','');
                window.close();
            }
            catch(e){

            }
        }
    }

方案二:

<script type="text/javascript">
function closeWP() {
 var Browser = navigator.appName;
 var indexB = Browser.indexOf('Explorer');

 if (indexB > 0) {
    var indexV = navigator.userAgent.indexOf('MSIE') + 5;
    var Version = navigator.userAgent.substring(indexV, indexV + 1);

    if (Version >= 7) {
        window.open('', '_self', '');
        window.close();
    }
    else if (Version == 6) {
        window.opener = null;
        window.close();
    }
    else {
        window.opener = '';
        window.close();
    }

 }
else {
    window.close();
 }
}
</script>

参考:https://www.cnblogs.com/exe19/p/5546719.html

 

新手理解HTML、CSS、javascript之间的关系

最准确的网页设计思路是把网页分成三个层次,即:结构层(HTML)、表示层(CSS)、行为层(Javascript)。

 

一、HTML、CSS、JavaScript简介及简单分工

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

1、什么是HTML(超文本标记语言 Hyper Text Markup Language),HTML 是用来描述网页的一种语言。
2、CSS(层叠样式表 Cascading Style Sheets),样式定义如何显示 HTML 元素,语法为:selector {property:value} (选择符 {属性:值})
3、JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

对于一个网页,HTML定义网页的结构,CSS描述网页的样子,JavaScript设置一个很经典的例子是说HTML就像 一个人的骨骼、器官,而CSS就是人的皮肤,有了这两样也就构成了一个植物人了,加上javascript这个植物人就可以对外界刺激做出反应,可以思 考、运动、可以给自己整容化妆(改变CSS)等等,成为一个活生生的人。如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人,没有Javascript、CSS是个毁容的植物人。
如果说HTML是建筑师,CSS就是干装修的,Javascript是魔术师。

二、HTML、CSS、JavaScript发展
1、HTML的版本
超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准):
HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日,W3C推荐标准
html 5
html 5
HTML 4.0——1997年12月18日,W3C推荐标准
HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
HTML 5——2014年10月28日,W3C推荐标准[4]

现在我们只说HTML 4.01和HTML5,因为2000年国际万维网联盟(W3C)公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言,目的是基于XML应用。而XHTML 与 HTML 4.01 几乎是相同的,HTML从最初发展到XHTML的过程中变得更加的严谨,更加的灵活,与CSS结合的更好。原则上说现在能看到的大部分网页是使用HTML4或者HTML5这两个版本的。

总结 html 原本最终是要过渡到xml的, 于是有了html->xhtml[html4]->xml 但是过渡不成功。所以直接有了html5。

HTML5
它是对HTML5的一次重大的修改,虽然HTML5 标准还在制定中,但不能阻碍其势不可挡的脚步。

2、CSS的版本(Level)

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

1996年W3C正式推出了CSS1;
1998年W3C正式推出了CSS2;
CSS2.1是W3C现在正在推荐使用的;
CSS3现在还处于开发中。

3、JavaScript的前世今生

JavaScript一种直译式脚本语言,它的解释器被称为JavaScript引擎,是浏览器的一部分,即:JavaScript是由客户端的浏览器解释执行的,所以在谈JavaScript的历史之前我们要先说一下浏览器,最早的web浏览器是创建于1991年的WorldWideWeb,后来改名为Nexus,之后出现了各类浏览器,直到1994年,网景公司(Netscape)发布了Navigator浏览器0.9版,这是历史上第一个比较成熟的网络浏览器,随后的1995年微软推出了IE浏览器,从此掀起了浏览器大战,微软采取操作系统捆绑IE浏览器,最终获得压倒性胜利,战争失利的Netscape在之后被收购、合并、解散。之后一段时间IE独领风骚,之后被Opera,Safari,Firefox,Chrome陆续瓜分掉一些市场份额,改变了一家独大的局面。

但是谈到JavaScript的历史,必须提到一个公司和一个人,那就是Netscape公司及其员工Brendan Eich,网景公司在发布了Navigator之后,急于解决浏览器与用户交互这个问题,Javascript之父Brendan Eich只用了10天的时间发明了livescript(让我辈情何以堪),由于网景高层是java的粉丝,或者说为了抱上当时热炒的java的大腿,livascript更名为javascript,Brendan Eich他的思路是:
      (1)借鉴C语言的基本语法;

  (2)借鉴Java语言的数据类型和内存管理;

  (3)借鉴Scheme语言,将函数提升到”第一等公民”(first class)的地位;

  (4)借鉴Self语言,使用基于原型(prototype)的继承机制。
所以,Javascript语言实际上是两种语言风格的混合产物—-(简化的)函数式编程+(简化的)面向对象编程。
Javascript 1.0获得了巨大的成功,Netscape随后推出了1.1,之后作为竞争对手的微软在自家的 IE3 中加入了名为 JScript (名称不同是为了避免侵权)的JavaScript实现。由此JavaScript 的规范化被提上日程,1997年,以 JavaScript1.1 为蓝本的建议被提交给了 欧洲计算机制造商协会 (ECMA),ECMA牵头经过数月的努力完成了 ECMA-262 ——定义了一种名为 ECMAScript 的新脚本语言的标准。

虽然 JavaScript 和 ECMAScript 通常被人用来表达相同的意思,但 JavaScript 的含义去比 ECMA-262 中规定的多得多。

一个完整的 JavaScript 实现应由三个部分组成:

(1)核心(ECMAScript), 描述了该语言的语法和基本对象。

(2)文档对象模型(DOM),描述处理网页内容的方法和接口。

(3)浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

 

 

推荐2款js插件

1、jQuery Smoove-华丽的CSS3滚动效果

http://www.jq22.com/jquery-info499

https://www.smoove-bike.com/

2、swiper 移动端滑动

https://www.swiper.com.cn/demo/web/index.html

layui图片放大预览 VS zoomify 放大

layui图片放大 可以在父框架中展示;zoomify目前不可以。

//调整预览大小
function previewImg(obj) {
        var img = new Image();  
        img.src = obj.src;
        var imgHtml = "<img src='" + obj.src + "' width='100%' height='100%'/>";  
        //弹出层
        layer.open({  
            type: 1,  
            shade: 0.8,
            offset: 'auto',
            area: [600 + 'px',300+'px'],
            shadeClose:true,
            scrollbar: false,
            title: "图片预览", //不显示标题  
            content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响  
            cancel: function () {  
                //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });  
            }  
        }); 
    }

//原图预览
function previewImgs(obj) {
        var img = new Image();  
        img.src = obj.src;
        var height = img.height + 50; //获取图片高度
        var width = img.width; //获取图片宽度
        var imgHtml = "<img src='" + obj.src + "' />";  
        //弹出层
        layer.open({  
            type: 1,  
            shade: 0.8,
            offset: 'auto',
            area: [width + 'px',height+'px'],
            shadeClose:true,//点击外围关闭弹窗
            scrollbar: false,//不现实滚动条
            title: "图片预览", //不显示标题  
            content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响  
            cancel: function () {  
                //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });  
            }  
        }); 
    }

 

 

zoomify调用:

<link rel="stylesheet" href="__ROOT__/static/fangda/dist/zoomify.min.css">
<script src="__ROOT__/static/fangda/dist/zoomify.min.js"></script>

	<script type="text/javascript">
		$('.fangda').zoomify("reposition");
	</script>

 

 

Ajax中return false无效

onSubmit="return checkForm();" 方法中:

在ajax里直接写return false,是无效的。

因为它返回的是ajax中的success方法,而不是checkForm()。

因此可以设置一个全局变量用来做判断,实现停止的效果。

注意:ajax一定要是同步的。

<script>

    function checkForm(){
        var cname = $("#cname").val();
        var randomSms = $("#randomSms").val();
        n = false;//全局变量,以便下面做判断
        $.ajax({
            type: "POST",
            url: "/1/mobile/jsCode",
            data: {cname:cname,randomSms:randomSms},
            dataType: "json",
            async: false,//一定要是同步请求,否则会跳转;(ajax默认是异步的)
            success: function(obj){
                if (obj['error'] == '1') {
                    alert(obj['message']);

                } else {
                    n = true;
                    alert(obj['message']);

                }
            }
        });
    //全局判断
        if(n) {
             return true;
        }else{
            return false;
        }
    }


</script>


总结:
重要的两个点:异步请求  +  全局变量的判断

 

layer 窗口中触发事件,给弹窗中指定的节点赋值。

 //ajax智能搜索
  function ajaxss(){
	var ss=$("#ss").val();
	$.ajax({
		   type: "POST",
		   url: "{:url('add_update_common')}",
		   data: "ss="+ss,
		   success: function(msg){
				//alert( "Data Saved: " + msg );
				$(".layui-layer-content #sscontent").html('66');
		   }
		});
  }

注意:layer弹窗中,节点选择器 .layui-layer-content

<input type=”text” name=”ss” id=”ss”>
<input type=”submit” onclick=”ajaxss();” value=”搜索” />
<div id=”sscontent”>

</div>

jquery操作select(取值,设置选中,取消选中。)

select下拉 onchange事件,实现增加selected属性的函数,经典。

function checkchange(obj){
$(“select[name=’app_order_way’] option”).each(function(){
if($(this).val()==$(obj).val()){ $(this).attr(“selected”,”selected”);
}else{
$(this).removeAttr(“selected”);
}

});

 

一、基础取值问题

例如<select class=”selector”></select>

1、设置value为pxx的项选中

$(“.selector”).val(“pxx”);

2、设置text为pxx的项选中

    $(“.selector”).find(“option:contains(‘pxx’)”).attr(“selected”,true);//不建议用attr,推荐下面的做法。

设置选中及对应的取消选中:

$(“#ids”).find(“option:selected”).prop(“selected”,false);
$(“#ids”).find(“option:contains(‘”+v+”‘)”).prop(“selected”,true);

  注意:之前$(“.selector”).find(“option[text=’pxx’]”).attr(“selected”,true);这种写法是错误的,目前个人证实input支持这种获取属性值的写法:”input[text=’pxx’]”,select中需要”option:contains(‘pxx’)”这样获取。

(感谢博友@ sunnyjs 指正)

这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value

$(“.selector”).val();

4、获取当前选中项的text

$(“.selector”).find(“option:selected”).text();

这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。

 

二、很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

如:$(“.selector1”).change(function(){

// 先清空第二个

$(“.selector2”).empty();

// 实际的应用中,这里的option一般都是用循环生成多个了

var option = $(“<option>”).val(1).text(“pxx”);

$(“.selector2”).append(option);

});

 

三、jQuery获取Select选择的Text和Value:

语法解释:
1. $(“#select_id”).change(function(){//code…});   //为Select添加事件,当选择其中一项时触发
2. var checkText=$(“#select_id”).find(“option:selected”).text();  //获取Select选择的Text
3. var checkValue=$(“#select_id”).val();  //获取Select选择的Value
4. var checkIndex=$(“#select_id “).get(0).selectedIndex;  //获取Select选择的索引值
5. var maxIndex=$(“#select_id option:last”).attr(“index”);  //获取Select最大的索引值

 

四、jQuery设置Select选择的 Text和Value:

语法解释:
1. $(“#select_id “).get(0).selectedIndex=1;  //设置Select索引值为1的项选中
2. $(“#select_id “).val(4);   // 设置Select的Value值为4的项选中
3. $(“#select_id option[text=’jQuery’]”).attr(“selected”, true);   //设置Select的Text值为jQuery的项选中

 

五、jQuery添加/删除Select的Option项:
语法解释:
1. $(“#select_id”).append(“<option value=’Value’>Text</option>”);  //为Select追加一个Option(下拉项)
2. $(“#select_id”).prepend(“<option value=’0′>请选择</option>”);  //为Select插入一个Option(第一个位置)
3. $(“#select_id option:last”).remove();  //删除Select中索引值最大Option(最后一个)
4. $(“#select_id option[index=’0′]”).remove();  //删除Select中索引值为0的Option(第一个)
5. $(“#select_id option[value=’3′]”).remove();  //删除Select中Value=’3’的Option
5. $(“#select_id option[text=’4′]”).remove();  //删除Select中Text=’4’的Option

 

六、jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 

1 获取一组radio被选中项的值
var item = $(‘input[name=items][checked]’).val();

2 获取select被选中项的文本
var item = $(“select[name=items] option[selected]”).text();

3 select下拉框的第二个元素为当前选中值
$(‘#select_id’)[0].selectedIndex = 1;

4 radio单选组的第二个元素为当前选中值
$(‘input[name=items]’).get(1).checked = true;

 

七、获取值
文本框,文本区域:$(“#txt”).attr(“value”);
多选框 checkbox:$(“#checkbox_id”).attr(“value”);
单选组radio:   $(“input[type=radio][checked]”).val();
下拉框select: $(‘#sel’).val();

八、控制表单元素:
文本框,文本区域:$(“#txt”).attr(“value”,”);//清空内容
$(“#txt”).attr(“value”,’11’);//填充内容
多选框checkbox: $(“#chk1”).attr(“checked”,”);//不打勾
$(“#chk2”).attr(“checked”,true);//打勾
if($(“#chk1”).attr(‘checked’)==undefined) //判断是否已经打勾
单选组 radio:    $(“input[type=radio]”).attr(“checked”,’2′);//设置value=2的项目为当前选中项
下拉框 select:   $(“#sel”).attr(“value”,’-sel3′);//设置value=-sel3的项目为当前选中项
$(“<option value=’1′>1111</option><option value=’2′>2222</option>”).appendTo(“#sel”)//添加下拉框的option
$(“#sel”).empty();//清空下拉框

autocomplete 属性 清除input框输入存留历史值,防止下拉历史值显示

autocomplete 属性规定输入字段是否应该启用自动完成功能。

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。

注释:autocomplete 属性适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。

<input type="text" name = "name" autocomplete="off" />

如果打开 on