Wrap iframe with a custom div - javascript

I'm using summernote with video plugin and would like to wrap the video iframe with a custom div. It is possible?
There is a method to detect when a content is inserted?

Check out this SO answer: jQuery/JavaScript: accessing contents of an iframe
In summary,
The contents of the iframe must be from the same domain as your website, or you will be limited due to the same origin policy.
If you have jQuery, you can access the contents of an iframe like so (where iframeid is the id property of the iframe element:
$("#iframeid").contents().find("#someDiv")
If you don't have jQuery, you can try:
myiframe.contentWindow.document
where myiframe is the target iframe DOM element.
Addendum: You may want to check if the iframe has loaded. With jQuery:
$("#iframeid").ready(function () {
//Do stuff in here
});

Related

How can i access to iframe inside iframe?

<iframe src="...">
<iframe id="embedIframe" src="...">
</iframe>
</iframe>
I want to select an Iframe element with an Id of "embedIframe".
I tried document.getElementById("embedIframe") in the console window in developer tools.
But this returns a null value.
The strange thing is that if I directly click "embedIframe" in the Chrome Developer Tools element tab with the mouse, then return to the console window and type document.getElementById("embedIframe"), a normal value is output.
https://i.imgur.com/natyF1I.png
I'm using react.
React doesn't find document.getElementById("embedIframe") either.
How can i access to Iframe id "embedIframe" at once?
If you have a document containing an iframe, and in the same document you have another iframe as a child element of the first … then your HTML is invalid and you can't do that.
Children of iframes used to be alternative content to render if the browser didn't support iframes, but that has been phased out and iframes are no longer allowed children.
If you have an iframe with a src of ... and then the document (from ...) the is loaded into that iframe contains another iframe then document.getElementById("embedIframe") doesn't work because embedIframe isn't part of that document.
You need to get the iframe in the current document, then get the document belonging to that frame, and then search that document for the iframe you want.

How to change the DOM element (background-color) in the iframe src?

There is a site signal-exchange.ru/reg, there are two iframe src in it. It is necessary to change in both iframe src, background-color. How to do it through javascript?
iframe background is part of iframe content. You cannot change anything in iframe content if iframe targets to another domain.
Your site is
https://signal-exchange.ru/reg
Your iframe elements target to https://olymptrade.com and https://binomo.com/
Target location is from another origin so you get error "Access denied" if you try to access iframe content.
Read more about it here
https://javascript.info/cross-window-communication

IFRAME not loading in parent frame when called from HTML page

We have 1 IFRAME present in asp page. And 1 HTML page where we have redirected to the parent IFRAME on click of anchor tag using angular.js.
In HTML page we have code as given below present inside anchor tag,
ng-click="seeDetail(); "> Go to parent Iframe
In javascript function seeDetail() we have code as shown below,
var url = "./PageToBeLoaded.asp";
parent.document.getElementsByTagName("IFRAME").item("frameID").src = url;
On call of this statement in javascript we need the URL to launch in parent IFRAME.However instead of loading in the parent IFRAME its loading in the HTML page itself.
Yes it is. You're looking in the parent, finding the iframe, and setting the src of it, which is probably the current iframe. I think what you're looking for is parent.location.assign(url).
We used ng-href tag with target attribute and it worked fine. Provided the URL to the ng-href and the frame name to the target attribute.

how to hide an iframe if content is empty

I am using iframe in which I am displaying some content from external url. I want to hide the iframe if there is no content to display (i.e empty). please let me know how to do this.
If you want to check content from external url inside iframe is empty, and the iframe is not cross-domain you could check for the existence of the body tag inside of the iframe. If it exists, then something loaded. Well if you can use jQuery, check it's length property. This is cross-browser compatible. If it's zero, it doesn't exist.
CODE:
if($("#iframeid").contents().find("body").length) {
// some html page loaded in iframe
}
If the iframe is cross-domain, you will be blocked by the same-origin policy. Otherwise this will work.
SOURCE: How to check if iframe is empty/null/undefined?
Use Jquery .content() to evaluate the content of the iframe and .hide() to hide it.
If you want to show it again latter use .toggle() instead.
No.
This cannot be done by a script on the calling page. The calling page will not be able to access the external document object loaded inside the iframe due to cross-domain security restriction.

Fetching inner element of Iframe

I have a simple html page. It has a iframe to some other site. I want to change the color of anchor tag that is nesteed in that Iframe. is is possible to access Elements of Iframe via javascript
If the other page is in another domain, due to cross-domain security, it will not be possible to edit HTML content of an iframe from the main page.
There are workaround for this, such as writing the change you want to make in the url. But this is really dirty.
If it is in the same domain, i suggest using, as example:
$('div', $('iframe')[0].contentWindow.document)
for getting all div elements inside your iframe
I did it by using following code
function loadFrame(){
document.getElementById('pcl_frame').contentWindow.document.getElementsByTagName('a')[0].style.color='blue';
}
You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.
Remember, the same origin policy applies, so you can only do this to iframe is coming from your own server.
frame1.$('mydiv').style.border='1px solid #000000'
or
frame1.$('mydiv').addClassName('withborder')
You can get the values of the elemets inside the iframe using
$('#iframeId').contents().find('#id-of-element-inside-iframe');
But the values cannot be altered.
There is just one simple solution, which will only work when you own the content in the iframe.
In your parent source add:
<script type="text/javascript">
var innerDocument = null;
</script>
In your iframe add:
<script type="text/javascript">
parent.innerDocument = document;
</script>
When the iframe is loaded you can now target the iframe's document by using innerDocument.
This circumvents the cross-domain security.

Categories

Resources