jrshikoku/Apps.js

import React from 'react';
import {View, Platform} from 'react-native';
import {WebView} from 'react-native-webview';
import Constants from 'expo-constants';
import StatusbarDetect from './StatusbarDetect';
var Status = StatusbarDetect();
export var webview = null;
export default function Apps ({ navigation: { navigate } }) {
  var urlcache="";
  return (
    <View style={{height:"100%",paddingTop: Constants.statusBarHeight,}}>
      {Status}
      <WebView 
      useWebKit={true}
      ref={ref => (this.webview = ref)}
      source={{uri: 'https://train.jr-shikoku.co.jp/sp.html'}} 
      originWhitelist={['https://train.jr-shikoku.co.jp','https://train.jr-shikoku.co.jp/sp.html']} 
      mixedContentMode={'compatibility'}
      javaScriptEnabled={true}
      allowsBackForwardNavigationGestures={true}
      onNavigationStateChange={
        event =>{
          console.log(event);
          if(event.url != urlcache){//URL二重判定回避
            urlcache = event.url;
            
            if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) {
              if(Platform.OS==="android")navigate('howto');
              this.webview.goBack();
              //Actions.howto();
            }
            else if (event.url.includes("https://train.jr-shikoku.co.jp/train.html")) {
              //Actions.trainbase({info: event.url});
              if(Platform.OS==="android")navigate('trainbase', {info: event.url});
              this.webview.goBack();
            }
          }
        }
      } 
      injectedJavaScript={js}/>
    </View>
  );
}
const js = `
var observer = new MutationObserver(function(){
  console.log(elem);
});
const elem = document.querySelector('#modal_content');
console.log(elem);
const config = { 
  attributes: true, 
  childList: true, 
  characterData: true 
};

observer.observe(elem, config);

document.getElementById('headerStr').style.display = 'none';
document.getElementById('modal_info').style.display = 'none';
document.getElementById('header').style.height = '50px';
document.getElementById('main').style.paddingTop = '54px';
document.querySelector('#header a').style.display = 'none';
after();
  
function after(){
  try {
    document.getElementById('refreshIcon').click();
    var elements = document.querySelectorAll('[onclick]');
    for (var index = 0; index < elements.length; index++) {
      var element = elements[index];
      if(element.getAttribute('onclick').indexOf('ShowTrainTimeInfo') != -1){
        var test = element.getElementsByTagName("p");
        var test3 = element.getAttribute('onclick').split('"');
        var HTrain = "\\n試運転";
        var RTrain = "\\n回送";
        var STrain = "\\n臨時列車";
        var WTrain = "ワンマン\\n";
        var 海 = "(海経由)";
        var 内 = "(内子経由)";
        var reg1 = new RegExp(/^4[1-9]\\d\\d[DM]$/);
        var reg2 = new RegExp(/^5[1-9]\\d\\d[DM]$/);
        var 海1 = new RegExp(/^49[0-4]\\dD$/);
        var 海2 = new RegExp(/^9[0-4]\\dD$/);
        var 内1 = new RegExp(/^46\\d\\dD$/);
        var 内2 = new RegExp(/^6\\d\\dD$/);
        var flag=false;
        test[0].innerText = test[0].innerText+test3[1];
        if(reg1.test(test3[1]) || reg2.test(test3[1])){
          test[0].innerText = WTrain+test[0].innerText;
          flag=true;
        }
        if(海1.test(test3[1]) || 海2.test(test3[1])){
          test[0].innerText = 海+(flag ? "" : "\\n")+test[0].innerText;
        }
        if(内1.test(test3[1]) || 内2.test(test3[1])){
          test[0].innerText = 内+(flag ? "" : "\\n")+test[0].innerText;
        }
        if(test3[1].indexOf("H") != -1){
          test[0].innerText = test[0].innerText+HTrain;
        }
        else if(test3[1].indexOf("R") != -1){
          test[0].innerText = test[0].innerText+RTrain;
        }
        else if(test3[1].indexOf("S") != -1){
          test[0].innerText = test[0].innerText+STrain;
        }
      }
    }
    try{
      document.querySelector('#pMENU_2').style.borderStyle='solid';
      document.querySelector('#pMENU_2').style.borderColor='#00d3e8';
      document.querySelector('#pMENU_2').style.borderWidth='2px';
      document.querySelector('#pMENU_2').style.borderRadius='10%';
      document.querySelector('#pMENU_3').style.borderStyle='solid';
      document.querySelector('#pMENU_3').style.borderColor='#00d3e8';
      document.querySelector('#pMENU_3').style.borderWidth='2px';
      document.querySelector('#pMENU_3').style.borderRadius='10%';
      document.querySelectorAll('#pMENU_2 div').forEach((d)=>{
        d.style.padding = '10px';
      }); 
      document.querySelectorAll('#pMENU_3 div').forEach((d)=>{
        d.style.padding = '10px';
      });  
    }catch(e){
      alert("にゃー");
    }
    
  } catch (e) {
  }
  setTimeout(after, 10000);
}
`;