Do you know these commonly used H5 codes?

Posted by itbegary on Mon, 07 Oct 2019 06:48:10 +0200

1. Return to the previous page
The first time you used the mobile phone end to return to the previous page, you only wrote window.history.go(-1).
But it only works on the phone. Apple phone compatibility needs to add return false after the jump code.
After the jump, refresh the page and add self.location.reload(); this sentence.

window.history.go(-1); //Return to the previous page
return false; //Compatible ios system
self.location.reload(); //ios refresh page

2, WeChat browser prohibit page pull-down
The addEventListener() method adds an event handle to the specified element.
The preventDefault() method prevents elements from defaulting.

document.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, {
  passive: false
});
document.oncontextmenu = function(e) { //Or return false;
  e.preventDefault();
};

3. Media Inquiry
Direction: horizontal/vertical screen
orientation: portrait | landscape
portrait: Specifies that the visible area of the page in the output device is greater than or equal to the width
Landscape: Except for portrait values, they are landscape

@media screen and (max-width: 320px){ } //width
@media only screen and (orientation: landscape) { } //Judgment of horizontal and vertical screen

4. Upload Picture Display
Display the uploaded pictures, which may be used in background management system.

<input type="file" name="image" onchange="show(this)">
<img id="img" src="" style="display: none;"/>
// JS code
function show(file){  
  var reader = new FileReader();  // Instantiate a FileReader object for reading files
  var img = document.getElementById('img');   // Get the label to display the picture  
  //Read data from File objects
  reader.onload = function(evt){
    img.style.display = 'block';
    img.src = evt.target.result;
  }
  reader.readAsDataURL(file.files[0]);
}

5. Events of long press

$(".btn").on({  
  touchstart: function(e) { 
    // Long Press Event Trigger  
    timeOutEvent = setTimeout(function() {  
      timeOutEvent = 0;  
      location.href='www.baidu.com'; //Jump link
    }, 400);    
  },  
  touchmove: function() {  
    clearTimeout(timeOutEvent);  
    timeOutEvent = 0;  
  },  
  touchend: function() {  
    clearTimeout(timeOutEvent);  
    if (timeOutEvent != 0) {  
      alert('Long press open');  
    }  
    return false;  
  }  
})

6. Adjust style according to page height

var height = $(window).height();
if(height>625){
  $('.box').css("margin-top", "10px");
}

7. Clear the Fork Number in the Browser Search Box

.search::-webkit-search-cancel-button{display: none;}
.search[type=search]::-ms-clear{display: none;}

8, judge ios and
When making H5 pages, there are some differences between ios and display, so sometimes I will do different adaptions and write different styles according to different mobile phone systems.

var u = navigator.userAgent, app = navigator.appVersion;
//android
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; 
//ios
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
if(isAndroid){ }
else{ }

Public Number Link

Topics: Javascript iOS Mobile Android Linux