Блог

Главная - Вопросы по программированию - Почему этот HTML-код, введенный в строке URL как «данные:текст/html», не работает?

Почему этот HTML-код, введенный в строке URL как «данные:текст/html», не работает?

#javascript #html #url

Вопрос:

У меня есть этот html-код (ниже), который отлично работает как размещенный файл (это означает, что код работает). —

 <!DOCTYPE html>
<html>
<head>
    <title>Read Text File</title>
    <!--<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>-->
    <script>
    var ThunkableWebviewerExtension = (function () {
      const postMessageToWebview = (message) => {
        if (window.ReactNativeWebView) {
          window.ReactNativeWebView.postMessage(message);
        } else {
          window.parent.postMessage(message, '*');
        }
      };
    
      const getReceiveMessageCallback = (fxn, hasReturnValue) => (event) => {
        if (typeof fxn === 'function') {
          if (event.data) {
            let dataObject;
            try {
              dataObject = JSON.parse(event.data);
            } catch (e) {
              // message is not valid json
            }
            if (dataObject amp;amp; dataObject.type === 'ThunkablePostMessage' amp;amp; hasReturnValue) {
              fxn(dataObject.message, (returnValue) => {
                const returnMessageObject = { type: 'ThunkablePostMessageReturnValue', uuid: dataObject.uuid, returnValue };
                postMessageToWebview(JSON.stringify(returnMessageObject));
              });
            } else if (!hasReturnValue amp;amp; (!dataObject || dataObject.type !== 'ThunkablePostMessage')) {
              fxn(event.data);
            }
          }
        }
      };
    
      return {
        postMessage: postMessageToWebview,
        receiveMessage: function(fxn) {
          const callbackFunction = getReceiveMessageCallback(fxn, false);
          document.addEventListener('message', callbackFunction, false);
          window.addEventListener('message', callbackFunction, false);
        },
        receiveMessageWithReturnValue: function(fxn) {
          const callbackFunction = getReceiveMessageCallback(fxn, true);
          document.addEventListener('message', callbackFunction, false);
          window.addEventListener('message', callbackFunction, false);
        },
      };
    })();
    </script>
</head>

<body>
    <input type="file" name="inputfile" id="inputfile">
    <br>

    <pre id="output"></pre>
    
    <script type="text/javascript">
        document.getElementById('inputfile')
            .addEventListener('change', function() {
            
            var fr=new FileReader();
            fr.onload=function(){
                //document.getElementById('output').textContent=fr.resu<
                var msg = fr.resu<
                ThunkableWebviewerExtension.postMessage(msg);
            }
            fr.readAsText(this.files[0]);
        })
    </script>
</body>
</html>

Что я хочу сделать, так это превратить весь этот код в длинный URL-адрес, и я обнаружил это, используя 'data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>' в начале, а затем добавив код.

Таким образом, URL-адрес HTML станет чем-то вроде — 'data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/><!DOCTYPE html><html><head> ...'

Я вижу кнопку загрузки файла и даже могу выбрать и загрузить файл. Но части сценария не работают — я не могу поймать ошибку здесь 😪

Пожалуйста, направьте/посоветуйте мне здесь… Спасибо!

Ответ №1:

Немного поэкспериментировав, я думаю, что проблема может заключаться в том, что вы не закодировали его по URL-адресу. Попробуйте использовать это вместо того, чтобы просто вставлять все это напрямую

(или скопируйте его отсюда)

 data:text/html,


    Read Text File
    <!---->
    
    var ThunkableWebviewerExtension = (function () {
      const postMessageToWebview = (message) => {
        if (window.ReactNativeWebView) {
          window.ReactNativeWebView.postMessage(message);
        } else {
          window.parent.postMessage(message, '*');
        }
      };
    
      const getReceiveMessageCallback = (fxn, hasReturnValue) => (event) => {
        if (typeof fxn === 'function') {
          if (event.data) {
            let dataObject;
            try {
              dataObject = JSON.parse(event.data);
            } catch (e) {
              // message is not valid json
            }
            if (dataObject amp;amp; dataObject.type === 'ThunkablePostMessage' amp;amp; hasReturnValue) {
              fxn(dataObject.message, (returnValue) => {
                const returnMessageObject = { type: 'ThunkablePostMessageReturnValue', uuid: dataObject.uuid, returnValue };
                postMessageToWebview(JSON.stringify(returnMessageObject));
              });
            } else if (!hasReturnValue amp;amp; (!dataObject || dataObject.type !== 'ThunkablePostMessage')) {
              fxn(event.data);
            }
          }
        }
      };
    
      return {
        postMessage: postMessageToWebview,
        receiveMessage: function(fxn) {
          const callbackFunction = getReceiveMessageCallback(fxn, false);
          document.addEventListener('message', callbackFunction, false);
          window.addEventListener('message', callbackFunction, false);
        },
        receiveMessageWithReturnValue: function(fxn) {
          const callbackFunction = getReceiveMessageCallback(fxn, true);
          document.addEventListener('message', callbackFunction, false);
          window.addEventListener('message', callbackFunction, false);
        },
      };
    })();
    



    
    





document.getElementById('inputfile')

.addEventListener('change', function() {


var fr=new FileReader();

fr.onload=function(){

//document.getElementById('output').textContent=fr.resu<

var msg = fr.resu<

ThunkableWebviewerExtension.postMessage(msg);

}

fr.readAsText(this.files[0]);

})


 


Но я могу ошибаться-у меня не очень большой опыт работы с javascript









	Метки: , ,