Develop Reference

Drag and drop to a child iframe using react-dnnd

I cannot drop elements onto iframe that is rendering my own components.
I'm trying to implement drag and drop functionality to a child iframe component.
After passing a dropRef, from a pareent, to a component rendering the iframe, dropping works only on components outside the iframe (IFrame is rendering my own components, not a separate website, so there is no CORS policy problem).
However, dropping does not work on the elements inside the iframe, even after passing the dropRef inside.
I checked this, and some other examples, but nothing seems to be working (Examples below seem to show wrong information in the alert).
https://codesandbox.io/examples/package/react-dnd-multi-iframe-backend
Is there any simple way to drop the draggable elements into the iframe?

How we can copy custom elements from parent window inside iframe window?

I have an application where I have loaded a few custom elements (Via js file ) and added iframe and loaded a page inside the iframe.
Can we copy all custom elements inside the frame window without adding custom elements js file reference?

The customElementsRegistry is a window Global object
An IFrame is another window
So they do not share Registry/Custom Elements
There is an ongoing discussion on Scoped Registries
https://github.com/WICG/webcomponents/issues/716
But that is more about multiple registries within one window/document
Its is unlikely your IFrame scenario will be tackled;
So just add your elements.js to the HTML file loaded in the IFrame

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.

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.