Scratchのソースコードから外部のHTMLファイルを開きたいと考えています。
現在、プログラムを開始させるボタンの中のプログラムに自分で書き加えています。
しかしxmlhttprequestを使った場合には全く挙動が見られず、window.openでそのまま開こうとするとcannot GET~というエラー文が表示されます。
開きたいファイルは書き加えたプログラムと同一のフォルダ内に保存しています。
React.jsやjavascriptでのファイル操作などが勉強しても理解出来ず、初歩的な質問となってしまい申し訳ありません。
宜しくお願い致します。
javascript
1import bindAll from 'lodash.bindall'; 2import PropTypes from 'prop-types'; 3import React from 'react'; 4import VM from 'scratch-vm'; 5import { connect } from 'react-redux'; 6 7import ControlsComponent from '../components/controls/controls.jsx'; 8 9class Controls extends React.Component { 10 constructor(props) { 11 super(props); 12 bindAll(this, [ 13 'handleGreenFlagClick', 14 'handleStopAllClick', 15 ]); 16 } 17 18 handleGreenFlagClick(e) { 19 e.preventDefault(); 20 if (e.shiftKey) { 21 this.props.vm.setTurboMode(!this.props.turbo); 22 } else { 23 if (!this.props.isStarted) { 24 this.props.vm.start(); 25 } 26 this.props.vm.greenFlag(); 27 28 } 29//以下15行が追加した部分です 30 //window.open('./HTML.html'); 31 const xhr = new XMLHttpRequest(); 32 33 window.onload = function onLoad() { 34 xhr.open('GET', './HTML.html', true); // GETでローカルファイルを開く 35 xhr.onload = () => { 36 console.log("success!"); 37 }; 38 xhr.onerror = () => { 39 console.log("error!"); 40 }; 41 42 xhr.send(); 43 window.open('./HTML.html'); 44 } 45//ここまで 46 } 47 handleStopAllClick(e) { 48 e.preventDefault(); 49 this.props.vm.stopAll(); 50 } 51 render() { 52 const { 53 vm, // eslint-disable-line no-unused-vars 54 isStarted, // eslint-disable-line no-unused-vars 55 projectRunning, 56 turbo, 57 ...props 58 } = this.props; 59 return ( 60 <ControlsComponent 61 {...props} 62 active={projectRunning} 63 turbo={turbo} 64 onGreenFlagClick={this.handleGreenFlagClick} 65 onStopAllClick={this.handleStopAllClick} 66 /> 67 ); 68 } 69} 70 71Controls.propTypes = { 72 isStarted: PropTypes.bool.isRequired, 73 projectRunning: PropTypes.bool.isRequired, 74 turbo: PropTypes.bool.isRequired, 75 vm: PropTypes.instanceOf(VM) 76}; 77 78const mapStateToProps = state => ({ 79 isStarted: state.scratchGui.vmStatus.running, 80 projectRunning: state.scratchGui.vmStatus.running, 81 turbo: state.scratchGui.vmStatus.turbo 82}); 83// no-op function to prevent dispatch prop being passed to component 84const mapDispatchToProps = () => ({}); 85 86export default connect(mapStateToProps, mapDispatchToProps)(Controls); 87
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>サンプル</title> 6</head> 7<body> 8 9 <h1>HTML.html</h1> 10 11 <button type="button" onClick="test();">OPEN</button> 12 <script> 13 function test() { 14 window.open('HTML.html'); 15 } 16 </script> 17 18</body> 19</html>
あなたの回答
tips
プレビュー