We Keep Coding

Create and access IFrame without 'src' attribute

there have been so many discussions in regard to access iframe with javascript. however, I can't find anything that related to an iframe without 'src' attribute.
basically, I have an iframe that doesn't have any src/link, it will be created by react and bunch of element will be inserted into this iframe on the page load.
to insert element I am using 'contentDocument!.body' which is the recommended technique.
it works fine in all browsers, except Firefox. apparently, firefox Adblock removing elements from the iframe.
so is it normal behaviour? even though iframe doesn't have an 'src' attribute and created directly in the page, shouldn't be treated as normal dom element?

I think I found the problem!
I have been creating the iframe dynamically with javascript. but look like the iframe must be rendered in the server side, and then it can be referenced and used safely to communicate with the main page

Change element style on a image inside a iframe

Is there a way to change the element-style of the img inside the iframe using jquery. The iframe epubjs-iframe change the id on every page load. What I want is to change the style = heigh="98%" to max-height:467 and width:auto on every page load.
Html-code

Yes, IF the src of your iframe is pointing to SAME domain.
Eg.
var iframe = $("#iframe"); // Selector to get the iframe
$("#elemInIframe", iframe.contents()).css("color", "blue"); //Or whatever method you want
And Of course, if the src of iframe is in different domain, due to security reasons, You will not be able to access the contents in javascript. Sorry about the same!!

Not know if it is the case here, but when working with iframes You may need to overcome Same Origin Policy: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
You can use PostMessage for cross-frame communication. To do so:
You need to be in control of the code both host page and embedded one
Or use the PostMessage API provided by page You want to embed
More about PostMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

How do I check if a textfield in iframe is empty?

Pretty much the question sums it up. I'm trying to do something similar to Gmail, where if you've entered stuff in a text field then the website will prompt you to to confirm if you want to leave the page.
But what if the text field in question is in an iframe? Obviously I can assign the iframe an id, but is there any javascript command or something that can check if a field in an iframe is empty or not? Is this even possible?
Edit: The iframe source and page the iframe is embedded in are from the same domain.

var value = document.getElementById('iframeID').contentDocument
.getElementById('theTextBoxId').value;
And yes, it's possible, you just need to get access to the <iframe> document with contentDocument.
From the DOM iframe element, scripts can get access to the window object of the included HTML page via the contentWindow property. The contentDocument property refers to the document element inside the iframe (this is equivalent to contentWindow.document), but is not supported by Internet Explorer versions before IE8.
Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain.
MDN

Just set onbeforeunload as you would as if the iframe'd page were the top-level page. If you try to navigate away in the parent frame or the child frame, it will be interrupted by the confirmation.

Using JQuery you can access the iframe content:
$("#iFrame").contents().find("#text")

Access child iFrame DOM from parent page

Here is the deal:
domain.com/page -- Parent page (document.domain=domain.com) contains an iframe
sub.domain.com/page -- Child iframe (document.domain=not set) is on a subdomain
Is there any way to access the DOM of that iframe or am I out of luck?
Does same origin policy block me from forcing a document.domain on an iframe contained within a parent page? I suppose that would defeat the purpose of the same origin policy... If that is the case, is there any workaround to access the DOM of the iframe on the rendered parent page?

There is a way. When the page in the iframe loads, have it do the following
parent.childGetElementById = function (id) {return document.getElementById(id);}
parent.childLoaded();
This will make a function in the global scope of the parent page (that contains the iframe). Then in the parent, just have the following
function childLoaded() {var dom = childGetElementById('someid');}
This is along as you have control of the page your loading into the iframe... if you do not, you are out of luck.

This is a browser security measure, otherwise everybody would be wrapping your banking websites and skimming off your passwords when you logged in.
You can talk from the iframe to the parent, but not back into an iframe again.

You're out of luck, as far as I know. You can talk between them using the hash-bang in the URL though, see this for a decent discussion.

How do I build an iframe with the same domain as the page in Safari/WebKit

The scene: I'm writing an embeddable widget. It takes the form of a <script> tag, which builds an iframe containing everything it needs to display. The iframe has no src, and the script writes to it with theIframe.contentWindow.document.write(). This keeps the widget contained, and keeps element ids and script from conflicting with the page on which the widget is embedded.
The trick: The widget has to be able to change its size. To do this, it sets its containing iframe's style.height. This requires access to the outer page's DOM. In Firefox and IE, this is allowed, because the iframe's document and the outer document are considered to share an origin.
The twist: In Safari, however, the two documents are considered not to share an origin. The inner document is considered to be at about:blank, while the outer document is clearly using a different protocol and "domain" (if blank can be considered the domain).
The question: How can I build an iframe programmatically whose document Safari/WebKit will consider to have the same origin as the document of the window creating it?
Edit: After further experimentation, I can't find a way to programmatically create an iframe whose location is not about:blank regardless of whether I change its contents.
If I create the frame with document.createElement(), give it a src which points to a real HTML resource on the same origin called "foo.html", and document.body.appendChild() it, Safari's console shows the element as expected in the DOM, but the contents of the page do not appear, and the document is listed in the sidebar as "about:blank".
If I include the HTML for the iframe directly in the page, the contents of foo.html appear, and "foo.html" appears in the sidebar.
If I insert the HTML using document.write(), I get the same result as with document.body.appendChild().
Both programmatic versions work in Firefox.

The best suggestion I could give is to have the iframe set to a blank page on the same server (ie blank.html) and then edit the content. A pain in the rear, I know but it's a workaround.
You could also try
iframe.contentDocument.open("replace");
iframe.contentDocument.write("<b>This is some content</b>");
iframe.contentDocument.close();
However, I'm not sure if that only works in IE. Sorry I couldn't be more helpful than that.

Aha. This seems to be a bug in WebKit. When an iframe is created programmatically, its src attribute is ignored. Instead, the frame defaults to about:blank and must be directed to a URL to point elsewhere. For example:
theIframe.contentWindow.location = theIframe.src