Develop Reference

Trigger close event of child iframe from within iframe, but without storing/passing iframe element ID?

There are similar questions like this and this, but none are identical.
Assume window A and child iframe B, both on the same domain.
How can you access the iframe element from within the child iframe itself?
The ultimate goal is to close the child iframe (B) without passing/storing ID/name information about the iframe. Ideally, there is a callback from the child iframe to the parent window, and this callback function contains a reference to the child iframe. The parent then calls remove on this reference.
No need to pass/store ID information related to the child iframe.
Is this possible?

window.frameElement gets you access to the iframe element.

Detach HTML element and open in a new browser window without breaking styles

I am building a SPA with Polymer3 (Javascript ES6 with imports). My application needs to move some widgets to new browser windows. Then users can move some widgets to multiple screens when having multiple monitors.Following is the procedure i follow to detach element from existing window and attach it to new window.
Detach element using HTML DOM removeChild() Method
Create new Window using window.open("", "myWindow",'modal=yes');
Attache new element to new window using newWindow.document.body.appendChild(element);
Problem
When the element is in the new window it does not take parent window styles.
When the element is detached some of the parent window styles are broken.
Can anyone please instruct on a way to achieve my requirement?

Im not 100% sure it would work, but you can open the same window you already have open twice. Second time, you open it with additional parameter.
E.g
// your app root url -> http://localhost/mySPA
widget1Window = window.open("http://localhost/mySPA/widget1", "myWindow",'modal=yes');
and in your app template you map that route to specific widget.
e.g in pseudo angular2 code, both routes load the same page, but with
different conditions in route.
<app>
<maincontent>
<common-stuff-between-windows></common-stuff-between-windows>
<widget1 *ngIf="showWidget1"></widget1>
<widget2 *ngIf="showWidget2"></widget2>
</maincontent>
</app>
and in your javascript routing you would check if the route contains
a widget reference. If yes, then make that part of the template visible.

How to clear DOM variables and storage when a new innerHTML is loaded dynamically for a Single page application?

Im loading a Dynamic HTMLs with JS into a div in a index page.
the index page div will be updated with another HTML file dynamically using JQuery.load function, according to the users action in the page.
The HTML also contains JS, and JS files are loading into DOM and its working perfectly as expected. but the problem is whenever a new HTML and JS is loaded, the DOM is getting updated, and its not refreshed.
the variables in previous JS files are still visible in Firefox dom stack.
i need to clear/refresh the DOM whenever a new HTML is loaded.
This application needs to be supported in IE8, so im not using angularJS. Heared angular is clearing DOM while loading new innerHTML files for Single page application.
please help me to clear DOM or suggest me any library files are available?

There is likely to be no silver bullet for this problem. Your scripts shall probably have some custom event or callback during which they would clear/reset/refresh variables that are set to DOM elements. This event or callback then should be called every time the document is updated through the usage of innerHTML.

Styling elements inside HTML inside iframe inside a webpage

I have a complete webpage (html/css/js) wrapped inside iframe within my webpage, this was called by javascript, of course this is from using 3rd party services. is there any way to style the elements inside the html within the iframe? since I dont have control over the webpage it calls, so I cant style them directly from my own webpage.

No. Not possible. You cannot edit html inside an iframe since it is controlled by other domain.

Intro.js in an iframe

I wanted it to work in an Iframe but if I define the js. in the parent document it does not recognize the elements that should be "introduced" inside the iframe. If I use it inside the iframe the effect is not what I expect (the overlay covers only the iframe).
[Intro.js being used inside an iframe.png] https://dl.dropboxusercontent.com/u/6421243/Intro.js%20being%20used%20inside%20an%20iframe.png
Is there something I can do with the plugin code so that it searches the elements inside an iframe but still shows the overlay over the parent?
UPDATE: I would like the black overlay over the WHOLE page (so the border of the iframe would also be covered by it).

Run intro.js in both iFrame and the parent.
In the parent, remove the toolTip and just highlight the iframe
In the iframe, run whatever toolTips you need
To communication between the two, have a look at this: How to communicate between iframe and the parent site?

First of all you should know that if you define your JavaScript codes outside of iframe, it's no longer available in the inner iframe because you don't have access to them.
So, you should put your codes inside the iframe only.
Update:
So I think you put the container element wrongly so the IntroJs define the overlay wrong wrongly too. Update and change your element container and then you will don't have any problem with that.