1 00:00:00,600 --> 00:00:04,230 The next thing we need to figure out is how to take some code that comes out of our bundling process 2 00:00:04,230 --> 00:00:06,390 and get it into that iFrame and execute it. 3 00:00:06,850 --> 00:00:10,590 So I'm going to show you a very simple, straightforward way that we can get some code inside of our 4 00:00:10,600 --> 00:00:13,610 iFrame and run it back inside my code editor. 5 00:00:14,250 --> 00:00:16,230 I'm going to give you a very quick reminder. 6 00:00:16,320 --> 00:00:20,770 Remember, inside of Unclick is where we are building up our bundle. 7 00:00:21,030 --> 00:00:22,020 We get back results. 8 00:00:22,500 --> 00:00:23,780 We then take the result. 9 00:00:23,820 --> 00:00:26,160 We join together all the output files of the bundle. 10 00:00:26,190 --> 00:00:27,960 Technically, there's only ever going to be one. 11 00:00:28,410 --> 00:00:31,710 And then we update a code piece of state inside of our component. 12 00:00:32,159 --> 00:00:35,370 So the output of our bundling process is stored inside of that code. 13 00:00:35,370 --> 00:00:39,960 Piece of state while we are looking at this code, is going to clean up the comment right here. 14 00:00:40,890 --> 00:00:46,080 And in addition, after the state code, we have that temporary attempt right here to execute some code 15 00:00:46,080 --> 00:00:48,150 using eval, we're not using this anymore. 16 00:00:48,180 --> 00:00:52,320 This was kind of a very naive first approach at running code inside the browser. 17 00:00:52,320 --> 00:00:57,300 But as we've learned, there are many, many ways in which it is better to run our code inside of an 18 00:00:57,300 --> 00:00:57,720 iFrame. 19 00:00:57,990 --> 00:01:00,050 We're going to take out that entire try catch block. 20 00:01:00,060 --> 00:01:01,050 Don't need it anymore. 21 00:01:02,080 --> 00:01:07,750 OK, then after that, here's how we're going to get our code into that iframe right above the return 22 00:01:07,750 --> 00:01:11,380 statement, I'm going to add in response to HTML. 23 00:01:13,030 --> 00:01:15,340 Inside that, I'm going to put a script element. 24 00:01:17,200 --> 00:01:22,720 And inside the script element, I'm going to do some interpellation and I'm going to put in that code 25 00:01:22,720 --> 00:01:23,680 piece of St.. 26 00:01:24,950 --> 00:01:29,240 The thing about this script tag right here and what is going to eventually be generated, we are taking 27 00:01:29,240 --> 00:01:31,040 the output of our bundling process. 28 00:01:31,340 --> 00:01:35,830 We are placing it into a script element and assigning that to this HTML variable. 29 00:01:36,500 --> 00:01:43,040 We then take HTML and provide it to the iFrame as its source property to the contents of the iFrame, 30 00:01:43,040 --> 00:01:45,080 the actual HTML that exists inside. 31 00:01:45,080 --> 00:01:49,150 There is going to be nothing but a script element with some JavaScript code. 32 00:01:49,700 --> 00:01:54,520 So when the iFrame boots up or loads up, the browser is going to take a look at the inside of it. 33 00:01:54,530 --> 00:01:59,790 It's going to say aha, a script tag, let's find all the code inside that script tag and execute it. 34 00:02:00,200 --> 00:02:04,160 So this should execute our code for us as soon as that iFrame loads up. 35 00:02:05,270 --> 00:02:09,620 Before we test this, I'm going to remove that last little HTML declaration right there that was just 36 00:02:09,620 --> 00:02:10,970 for quick testing purposes. 37 00:02:11,840 --> 00:02:17,300 OK, I'm going to save this look back over the browser, I'm going to refresh and you'll notice just 38 00:02:17,300 --> 00:02:20,060 about right away we now see a little error message up here. 39 00:02:20,630 --> 00:02:23,670 This error message is a very small little gotcha. 40 00:02:24,110 --> 00:02:27,770 Remember, we added on that sandbox property right here to the iFrame itself. 41 00:02:28,130 --> 00:02:34,910 The sandbox property is describing all the things that this iFrame is allowed to do right now by providing 42 00:02:34,910 --> 00:02:36,380 a sandbox of empty string. 43 00:02:36,380 --> 00:02:42,670 We're essentially saying this iFrame has permission to do just about nothing but show very basic HTML 44 00:02:43,070 --> 00:02:46,490 so it is not allowed to run any JavaScript code through scripts. 45 00:02:46,830 --> 00:02:49,490 It is not allowed to create any alerts. 46 00:02:49,640 --> 00:02:51,530 It cannot use physical devices. 47 00:02:51,710 --> 00:02:55,280 There's a whole long list of things that this iFrame is not permitted to do. 48 00:02:56,120 --> 00:03:01,280 So if we want to allow our iFrame to actually run some code that is inside of a script tag, we have 49 00:03:01,280 --> 00:03:04,040 to add in a little attribute to Sandbox. 50 00:03:04,040 --> 00:03:04,850 We're going to add in there. 51 00:03:06,110 --> 00:03:08,810 Allow scripts like so. 52 00:03:09,670 --> 00:03:14,840 So we are now saying to our browser that this iFrame should be allowed to execute a script tag. 53 00:03:15,130 --> 00:03:16,060 That's what this does. 54 00:03:17,320 --> 00:03:21,670 All right, going to save that flip over again, we no longer have that error message, which is good. 55 00:03:22,670 --> 00:03:26,190 Now, I'm going to add in some code to my text area. 56 00:03:26,240 --> 00:03:27,350 I'll do a council log of one. 57 00:03:28,270 --> 00:03:32,680 We're going to click on Submit that should bundle our code, we should get the output that should be 58 00:03:32,680 --> 00:03:35,860 pushed into the iFrame where we should see it executed. 59 00:03:36,310 --> 00:03:39,820 So hopefully we should see a log of one your our console. 60 00:03:40,120 --> 00:03:40,930 Let's try this out. 61 00:03:41,390 --> 00:03:43,510 I'm going to submit and there it is. 62 00:03:44,830 --> 00:03:49,840 Awesome, if you look at the consulate closely, you'll notice from this little link over here, it 63 00:03:49,840 --> 00:03:52,940 is definitely a consular log coming from inside of the iFrame. 64 00:03:53,740 --> 00:03:55,710 That's essentially what that link right there is saying. 65 00:03:56,350 --> 00:04:00,370 We can also change the consul log of one to to submit again. 66 00:04:01,010 --> 00:04:01,570 Again. 67 00:04:02,540 --> 00:04:05,450 Yep, looks like this is definitely working as expected. 68 00:04:06,530 --> 00:04:11,120 OK, so that is pretty much it, we've now got our code being bundled. 69 00:04:12,110 --> 00:04:16,610 We are taking that bundled output, we are pushing it into the iFrame, where it then gets executed. 70 00:04:16,820 --> 00:04:21,149 So this is looking once again really good and we're making fantastic progress here. 71 00:04:21,980 --> 00:04:24,340 Let's take a pause and move on in just a moment.