4週目の2019年11月問題フロントエンドの概要

2019年11月18日
  • デジタル自動下線のIE / EDGE

このiViewのconfigureメタ?

  • 場合入力[タイプ=「ファイル」]ファイルを選択し、ファイル名一貫性、デフォルトのファイルは、修飾されていません。

    ファイルを選択した場合は、新しい入力入力して、古いを置き換えます

2019年11月19日
  • jsがトップを達成 - 小型ロケットのスタイルを

コールwindow.scroll()イベント、ボトムアップからのロケットの位置、ページ位置scrollTopスプライト()をクリックしてください:0

$('html,body').animate({ scrollTop: '0px' }, 800);
2019年11月20日
  • 現在のブラウザ情報を取得します。
function myBroswer() {
            var userAgent = navigator.userAgent;
            var isOpera = userAgent.indexOf("Opera") > -1;
            var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera;
            var isEdge = userAgent.indexOf("Edge") > -1;
            var isFireFox = userAgent.indexOf("FireFox") > -1;
            var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1;
            var isChrome = userAgent.indexOf('Chrome') > -1 && userAgent.indexOf("Safari") > -1;

            if (isIE) {
                var reIE = new RegExp("MSIE(\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if (fIEVersion == 7) {
                    return "IE7"
                } else if (fIEVersion == 8) {
                    return "IE8"
                } else if (fIEVersion == 9) {
                    return "IE9"
                } else if (fIEVersion == 10) {
                    return "IE10"
                } else if (fIEVersion == 11) {
                    return "IE11"
                } else {
                    return "0"
                }
                return "IE"
            }

            if (isOpera) {
                return "Opera"
            }
            if (isEdge) {
                return "Edge"
            }
            if (isFireFox) {
                return "FireFox"
            }
            if (isSafari) {
                return "Safari"
            }
            if (isChrome) {
                return "Chrome"
            }
        }
  • jsがコピー]をクリックします達成します
<head>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/clipboard.min.js"></script>
</head>
<body>
    <div id="copyText">我是复制文本</div>
    <button id="copyBtn">点我复制</button>
    <input type="text" id="copyContent" style="z-index: -10;opacity: 0;position: absolute;top: -10;">
<script>
    if (myBroswer() != 'Chrome') {
     //非Chrome
      $('#copyBtn').on('click', function () {
         var text = document.getElementById('copyText').innerText;
         clipboardData.setData("text", text) 
         //第一个参数为要复制内容的格式,第二个参数为要复制的内容

         //clipboardData.clearData(sDataFormat)  删除剪贴板中指定格式的数据
         //clipboardData.getData(sDataFormat)  获取剪贴板中指定格式的数据

         //不支持Chrome
    })
     } else {
      //Chrome
       $('#copyBtn').on('click', function () {
         var text = document.getElementById('copyText')
         var content = document.getElementById('copyContent')
         content.value = text.innerText
         content.select();   //select()只支持input 和textarea
         document.execCommand('copy')
         console.log('复制成功');
     })
}
</script>
    
</body>
  • VUE-ルータページジャンプに成功ではなく、ディスプレイ構成要素ではなく、エラーの内容
//new VueRouter时, routes 不小心写成 routers
//正确写法
var routerOBj = new VueRouter({
    routes: [
    { path: '/login', component: login },
    { path: '/register', component: register }
    ]
})
2019年11月22日
  • サイレントは、現在のページのURLアドレスに変更します

    • history.pushState(状態、タイトル、URL)
    • この方法は、ページの更新をトリガしないだけでsendは履歴オブジェクトに結果を変更し、アドレスバーには反応します
      • 銅像:主にpopStateイベントのために、オブジェクトの状態に関連付けられたレコードを追加します。イベントがトリガされると、オブジェクトは、コールバック関数を渡します。言い換えれば、ブラウザは、シリアライズがページをリロードし、ローカルに保持した後、彼らはこのオブジェクトを取得することができます対象となります。あなたはヌルを埋めることができていないオブジェクト、もし。
      • タイトル:新しいページのタイトル。しかし、今、すべてのブラウザでは、このパラメータを無視するので、ここであなたは空白の文字列を埋めることができます。
      • URL:新しいURLは、ページには、現在と同じドメインになければなりません。ブラウザのアドレスバーにURLが表示されます。
    history.pushState({page: 1}, "title 1", "?page=1");
    • この方法を使用した後、読ん属性状態オブジェクトのhistory.stateを使用することが可能です
    console.log(history.state)  //{page:1}
    • 場合はpushStateURLのパラメータは、新しいアンカー値(あるを設定hash)、およびトリガされませんhashchangeイベントを。URLのアンカー値が変更された場合は逆に、それは歴史のオブジェクト内の歴史を作成します。
    • 場合pushState()の方法は、クロスドメインのURLを設定されている、それはエラーになります。この設計の目的は、この方法は、ページジャンプを起こさないため、ユーザーは別のウェブサイト上にあったと思ってみましょうする悪質なコードを防ぐためです。
    // 报错
    // 当前网址为 http://example.com
    history.pushState(null, '', 'https://twitter.com/hello');
    • History.replaceState()
    • この方法は、同一の残りpushStateに()メソッドで、現在のレコードの履歴オブジェクトを変更するために使用され
    • History.popState()
    • イベントはhistory.go、唯一そのような前方ブラウザと後方ボタン、またはJavaScriptのコールhistory.back()、history.forward()と同じ内部文書の操作を切り替えるためhistory.popStateをトリガする()メソッドの場合()イベント。
    • ただ、トリガされませんpushState()とreplaceState()を呼び出します。
    //使用的时候,可以为popstate事件指定回调函数。
    window.onpopstate = function (e) {
        console.log('location:' + document.location)
        console.log('state:' + JSON.stringify(e.state));
    }
    
    //或者
    window.addEventListener('popstate', function (e) {
        console.log('location:' + document.location)
        console.log('state:' + JSON.stringify(e.state));
    })
    • パラメータは、コールバック関数であるeventイベント・オブジェクト、そのstate属性の点pushStatereplaceState状態オブジェクトのための方法(すなわち、これらの2つの方法の最初のパラメータである)は、現在提供されたURL。上記のコードはevent.state、を介して行われるpushStatereplaceState、現在のURLの結合のための方法stateのオブジェクト。
    • stateオブジェクトはまたを通じて直接することができhistory読取対象物。
    var currentState = history.state;
    • ページが最初にロードされるときに、ブラウザがトリガされないことに注意してくださいpopstateイベントを。
  • 現在のURLにあるJS取得パラメータ

function getUrlParam() {
   var name = window.location.search;
   var obj = new Object;
   if (name.indexOf('?') > -1) {
      var strs = name.substr(1).split('&');
      for (let i in strs) {
         obj[strs[i].split('=')[0]] = decodeURIComponent(strs[i].split('=')[1])
      }
   }
    return obj;
}

//调用
//getUrlParam().page
  • 位置オブジェクトは、Windowオブジェクトの一部であり、それはwindow.locationプロパティによってアクセスすることができます。

  • シャープ記号(#)からハッシュセットや戻りURL(アンカー)が始まりました。
    ホストを設定または返しますホスト名と現在のURLのポート番号。
    ホスト名を設定または返します現在のURLのホスト名。
    HREFを設定または返します完全なURL。
    現在のリターンパスまたはURLのセットパス名の一部。
    ポートを設定または返します現在のURLのポート番号。
    現在のURLを設定したり、返却するプロトコル契約。
    疑問符から設定またはリターンを検索する(?)URL(クエリー部分)が始まりました。

  • WebPACKのマルチ./src/main.js ./dist/bundle.jsで打包时报错ERROR
    モジュールが見つかりませんエラー:解決できないで」\ distの\ bundle.js。 'E:\ WebPACKの'
    @マルチ。 /src/main.js ./dist/bundle.jsメイン[1]

    理由:WebPACKのバージョンは、元のインストールコマンドNAが高すぎます

    元のインストールコマンド

    webpack .\src\main.js .\dist\bundle.js

    変更

    webpack .\src\main.js -o .\dist\bundle.js
2019年11月23日
  • キャッチされない例外TypeError:jQueryのを参照する際にエラーとなってrequire.js $は関数ではありません

    requirejs.config({
        paths: {
            jquery: "../js/jquery-3.4.1"
        }
    })
    
    require(['jquery'], function ($) {
      //jQuery版本过旧,旧版本使用live方法而不是on
      //jquery.js更新到新版本即可
        $(document).on('click', '#btn', function () {
            $('#msg').html('I am coming~')
        })
    })

おすすめ

転載: www.cnblogs.com/dairyDeng/p/11927247.html