Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #37814 > unrolled thread

Import textblob from iframe to parent

Started byJonas Thörnvall <jonas.thornvall@gmail.com>
First post2019-11-20 22:29 -0800
Last post2019-11-22 18:27 +0700
Articles 7 — 2 participants

Back to article view | Back to comp.lang.javascript

Contents

  Import textblob from iframe to parent Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-11-20 22:29 -0800
    Re: Import textblob from iframe to parent Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-11-20 22:57 -0800
      Re: Import textblob from iframe to parent JJ <jj4public@vfemail.net> - 2019-11-21 23:52 +0700
        Re: Import textblob from iframe to parent Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-11-22 02:02 -0800
          Re: Import textblob from iframe to parent Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-11-22 02:53 -0800
            Re: Import textblob from iframe to parent JJ <jj4public@vfemail.net> - 2019-11-22 18:37 +0700
          Re: Import textblob from iframe to parent JJ <jj4public@vfemail.net> - 2019-11-22 18:27 +0700

#37814 — Import textblob from iframe to parent

FromJonas Thörnvall <jonas.thornvall@gmail.com>
Date2019-11-20 22:29 -0800
SubjectImport textblob from iframe to parent
Message-ID<28cf8fdc-65e7-4586-abf9-466409585dbc@googlegroups.com>
Is this enough to fetch variable in iframe so i can import the textblob in parsedMidi, so my parent to the iframe script can reparse it?

Below is the iframe code, is this approach transfer the output of iframe script to parent script sound?

<script type="text/javascript">

//MY CODE START
function copyParent(){
	     parent.importedMidi = parsedMidi;
	     parent.reparseMidi();
}
//MY CODE END


		if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
			document.querySelector("#FileDrop #Text").textContent = "Reading files not supported by this browser";
		} else {

			const fileDrop = document.querySelector("#FileDrop")

			fileDrop.addEventListener("dragenter", () => fileDrop.classList.add("Hover"))

			fileDrop.addEventListener("dragleave", () => fileDrop.classList.remove("Hover"))

			fileDrop.addEventListener("drop", () => fileDrop.classList.remove("Hover"))

			document.querySelector("#FileDrop input").addEventListener("change", e => {
				//get the files
				const files = e.target.files
				if (files.length > 0){
					const file = files[0]
					document.querySelector("#FileDrop #Text").textContent = file.name
					parseFile(file)
					
					
				}
			})
		copyParent()
		}

		let currentMidi = null

		function parseFile(file){
			//read the file
			const reader = new FileReader()
			reader.onload = function(e){
				const midi = new Midi(e.target.result)
				document.querySelector("#ResultsText").value = JSON.stringify(midi, undefined, 2)

                                //MY addition to fetch textblob
				parsedMidi=JSON.stringify(midi, undefined, 2)
                            
				document.querySelector('tone-play-toggle').removeAttribute('disabled')
			}
			reader.readAsArrayBuffer(file)
			
		}
		
     
		
	</script>

[toc] | [next] | [standalone]

#37815

FromJonas Thörnvall <jonas.thornvall@gmail.com>
Date2019-11-20 22:57 -0800
Message-ID<af08c9ff-6a27-4acb-a7a9-52a808f5656b@googlegroups.com>
In reply to#37814
Den torsdag 21 november 2019 kl. 07:29:30 UTC+1 skrev Jonas Thörnvall:
> Is this enough to fetch variable in iframe so i can import the textblob in parsedMidi, so my parent to the iframe script can reparse it?
> 
> Below is the iframe code, is this approach transfer the output of iframe script to parent script sound?
> 
> <script type="text/javascript">
> 
> //MY CODE START
> function copyParent(){
> 	     parent.importedMidi = parsedMidi;
> 	     parent.reparseMidi();
> }
> //MY CODE END
> 
> 
> 		if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
> 			document.querySelector("#FileDrop #Text").textContent = "Reading files not supported by this browser";
> 		} else {
> 
> 			const fileDrop = document.querySelector("#FileDrop")
> 
> 			fileDrop.addEventListener("dragenter", () => fileDrop.classList.add("Hover"))
> 
> 			fileDrop.addEventListener("dragleave", () => fileDrop.classList.remove("Hover"))
> 
> 			fileDrop.addEventListener("drop", () => fileDrop.classList.remove("Hover"))
> 
> 			document.querySelector("#FileDrop input").addEventListener("change", e => {
> 				//get the files
> 				const files = e.target.files
> 				if (files.length > 0){
> 					const file = files[0]
> 					document.querySelector("#FileDrop #Text").textContent = file.name
> 					parseFile(file)
> 					
> 					
> 				}
> 			})
> 		copyParent()
> 		}
> 
> 		let currentMidi = null
> 
> 		function parseFile(file){
> 			//read the file
> 			const reader = new FileReader()
> 			reader.onload = function(e){
> 				const midi = new Midi(e.target.result)
> 				document.querySelector("#ResultsText").value = JSON.stringify(midi, undefined, 2)
> 
>                                 //MY addition to fetch textblob
> 				parsedMidi=JSON.stringify(midi, undefined, 2)
>                             
> 				document.querySelector('tone-play-toggle').removeAttribute('disabled')
> 			}
> 			reader.readAsArrayBuffer(file)
> 			
> 		}
> 		
>      
> 		
> 	</script>

This works but i had to set a timeout? Anyway to avoid this?

<script type="text/javascript">

		parsedMidi="";
		if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
			document.querySelector("#FileDrop #Text").textContent = "Reading files not supported by this browser";
		} else {

			const fileDrop = document.querySelector("#FileDrop")

			fileDrop.addEventListener("dragenter", () => fileDrop.classList.add("Hover"))

			fileDrop.addEventListener("dragleave", () => fileDrop.classList.remove("Hover"))

			fileDrop.addEventListener("drop", () => fileDrop.classList.remove("Hover"))

			document.querySelector("#FileDrop input").addEventListener("change", e => {
				//get the files
				const files = e.target.files
				if (files.length > 0){
					const file = files[0]
					document.querySelector("#FileDrop #Text").textContent = file.name
					parseFile(file)
				
					
				}
				setTimeout(function(){ 	sendParent();}, 100);
				
			})
		
		}

		let currentMidi = null
      
		function parseFile(file){
			//read the file
			const reader = new FileReader()
			reader.onload = function(e){
				const midi = new Midi(e.target.result)
				//document.querySelector("#ResultsText").value = JSON.stringify(midi, undefined, 2)
				parsedMidi=JSON.stringify(midi, undefined, 2)
					
				document.querySelector('tone-play-toggle').removeAttribute('disabled')
			}
			reader.readAsArrayBuffer(file)
		
		}
		

		function sendParent(){
			parent.importedMidi = parsedMidi;
			parent.reparseMidi();
	     
		}
	</script>

[toc] | [prev] | [next] | [standalone]

#37820

FromJJ <jj4public@vfemail.net>
Date2019-11-21 23:52 +0700
Message-ID<1uxnxlecu9xei$.1x17uq6tqopw2$.dlg@40tude.net>
In reply to#37815
On Wed, 20 Nov 2019 22:57:26 -0800 (PST), Jonas Thörnvall wrote:
> 
> This works but i had to set a timeout? Anyway to avoid this?
> 

FileReader works asynchronously.

[toc] | [prev] | [next] | [standalone]

#37825

FromJonas Thörnvall <jonas.thornvall@gmail.com>
Date2019-11-22 02:02 -0800
Message-ID<20c51e6c-9e45-446b-a345-55dd242095d4@googlegroups.com>
In reply to#37820
Den torsdag 21 november 2019 kl. 17:52:39 UTC+1 skrev JJ:
> On Wed, 20 Nov 2019 22:57:26 -0800 (PST), Jonas Thörnvall wrote:
> > 
> > This works but i had to set a timeout? Anyway to avoid this?
> > 
> 
> FileReader works asynchronously.

Yes but isn't there like a promise like structure for asynchronus operations, you can check for a flag when completed succesfully?

[toc] | [prev] | [next] | [standalone]

#37827

FromJonas Thörnvall <jonas.thornvall@gmail.com>
Date2019-11-22 02:53 -0800
Message-ID<d2176665-af72-4cb2-bf91-6bc7f63b23d7@googlegroups.com>
In reply to#37825
Den fredag 22 november 2019 kl. 11:02:29 UTC+1 skrev Jonas Thörnvall:
> Den torsdag 21 november 2019 kl. 17:52:39 UTC+1 skrev JJ:
> > On Wed, 20 Nov 2019 22:57:26 -0800 (PST), Jonas Thörnvall wrote:
> > > 
> > > This works but i had to set a timeout? Anyway to avoid this?
> > > 
> > 
> > FileReader works asynchronously.
> 
> Yes but isn't there like a promise like structure for asynchronus operations, you can check for a flag when completed succesfully?

I mean something like onSuccess do....

[toc] | [prev] | [next] | [standalone]

#37829

FromJJ <jj4public@vfemail.net>
Date2019-11-22 18:37 +0700
Message-ID<1s4mwc1c5df6s$.19dgb57b1r3gd$.dlg@40tude.net>
In reply to#37827
On Fri, 22 Nov 2019 02:53:17 -0800 (PST), Jonas Thörnvall wrote:
> 
> I mean something like onSuccess do....

That'll be the `onload`. Did you forget that you already use it?

[toc] | [prev] | [next] | [standalone]

#37831

FromJJ <jj4public@vfemail.net>
Date2019-11-22 18:27 +0700
Message-ID<1f4l6e2ay6gtm$.uth4ae67q2fy$.dlg@40tude.net>
In reply to#37825
On Fri, 22 Nov 2019 02:02:22 -0800 (PST), Jonas Thörnvall wrote:
> 
> Yes but isn't there like a promise like structure for asynchronus
> operations, you can check for a flag when completed succesfully?

Check the FileReader's `readyState` property.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web