1 00:00:01,130 --> 00:00:05,150 Let's take a look at how we can reset the contents of that iframe right before we try to execute code 2 00:00:05,150 --> 00:00:05,700 inside of it. 3 00:00:06,260 --> 00:00:09,650 So in general, what we want to do here is a very quick demonstration. 4 00:00:10,220 --> 00:00:11,290 You're going to find my console. 5 00:00:11,900 --> 00:00:18,020 I'm going to do a document query selector of iFrame and we'll find our iFrame right there. 6 00:00:19,390 --> 00:00:26,730 When we select our iFrame, we can then manually set its SIRC dock property, so I'll do source dock 7 00:00:26,740 --> 00:00:29,110 notice that it is lower case dock right there. 8 00:00:30,360 --> 00:00:34,330 And I can stick in some HTML by just assigning a string directly to it. 9 00:00:34,740 --> 00:00:41,550 So, for example, if I try to assign a that will put a sort of a into the iFrame when you assign a 10 00:00:41,550 --> 00:00:46,320 source dock property directly of an iFrame, that's going to essentially reset the contents inside there, 11 00:00:46,770 --> 00:00:48,650 even if you set it to an identical string. 12 00:00:49,140 --> 00:00:54,180 So all you and I really need to do is make sure that maybe right before we start that bundling process, 13 00:00:54,480 --> 00:00:58,710 we're going to update the source dock property of the iFrame manually. 14 00:01:00,090 --> 00:01:02,730 That should reset its contents and do exactly what we want. 15 00:01:03,390 --> 00:01:10,080 All right, so let's give this a shot back inside my editor as a quick reminder, we've got a reference 16 00:01:10,080 --> 00:01:11,610 to the iFrame put together already. 17 00:01:12,590 --> 00:01:17,460 Then down inside of unclick, right before we start our bundling process, I'm going to take a look 18 00:01:17,460 --> 00:01:19,320 at iFrame Current. 19 00:01:20,040 --> 00:01:27,240 I'm going to update its Sarsae property and I'm going to set it to that same HTML string that we have 20 00:01:27,240 --> 00:01:27,750 down here. 21 00:01:29,450 --> 00:01:31,640 I'll say HTML like so. 22 00:01:32,640 --> 00:01:37,440 All right, now, this is totally fine to refer to, even though that string is or that variable is 23 00:01:37,440 --> 00:01:41,850 defined later on down inside of our component, but at present, it kind of feels like we're using this 24 00:01:41,850 --> 00:01:43,170 variable all over the place. 25 00:01:43,470 --> 00:01:45,570 We should eventually do a little bit of code cleanup here. 26 00:01:45,780 --> 00:01:48,720 I remember I had said that this is something that we definitely have to address in general. 27 00:01:48,720 --> 00:01:52,580 We need to make sure that we, you know, organize our code inside this application a little bit better, 28 00:01:52,620 --> 00:01:56,550 because right now everything is just being placed directly inside of our index file. 29 00:01:56,910 --> 00:01:58,710 So we will eventually do some code cleanup. 30 00:01:58,710 --> 00:02:02,700 But right now, let's just continue working on this thing and developing a couple of features. 31 00:02:03,690 --> 00:02:06,840 Having said that, I'm going to save this look back over. 32 00:02:08,070 --> 00:02:14,190 Make sure I do my refresh and now let's try to simulate what might happen if user first accidentally 33 00:02:14,190 --> 00:02:19,800 deletes that div with it right there and then tries to execute some code that makes use of it. 34 00:02:20,550 --> 00:02:24,480 So I'm going to do that elements inspector inside of my HTML document. 35 00:02:24,480 --> 00:02:25,170 So the iFrame. 36 00:02:25,410 --> 00:02:27,120 Yep, that thing definitely exists right there. 37 00:02:27,940 --> 00:02:36,430 If I do a document body that inner HTML and set that to empty string, I can very easily delete that. 38 00:02:37,050 --> 00:02:38,340 Now if I click inside their. 39 00:02:39,700 --> 00:02:41,260 Yep, body is totally deleted. 40 00:02:42,640 --> 00:02:52,150 But now, if I delete that line and replace it with a console log document where he selector of pound 41 00:02:52,150 --> 00:02:57,880 route, I'm going to expect to see a console log of that day with its route, because as soon as I click 42 00:02:57,880 --> 00:03:00,970 on Submit, I should be resetting the contents of the iFrame. 43 00:03:01,540 --> 00:03:06,280 We're then going to bundle this code, execute that code inside the iFrame, and by that point in time 44 00:03:06,520 --> 00:03:10,020 that div should have been recreated inside that body right there. 45 00:03:10,240 --> 00:03:12,520 Technically it's not being recreated inside this body. 46 00:03:12,730 --> 00:03:15,790 PENGELLY The entire HTML document has really been recreated. 47 00:03:16,650 --> 00:03:21,540 OK, so let's try this out on the summit, and sure enough, I do see that once a log of the dead right 48 00:03:21,540 --> 00:03:21,810 there. 49 00:03:22,890 --> 00:03:30,060 I can also inspect this thing again, here is HTML, there's body, yep, it was definitely created. 50 00:03:30,630 --> 00:03:36,510 So now with every execution of code, we are first resetting the contents of the iFrame and then attempting 51 00:03:36,510 --> 00:03:37,590 to do our execution. 52 00:03:38,170 --> 00:03:39,780 So this is definitely a very good improvement. 53 00:03:40,710 --> 00:03:41,030 All right. 54 00:03:41,040 --> 00:03:44,460 So that's pretty much it for the last kind of major thing I wanted to add in. 55 00:03:44,790 --> 00:03:49,260 Let's take a break right here and start working on our next big feature in the next video.