In iframe I have opened another website and want to change the div content within the iframe.
I have tried this but not working
$('#iframe #divId').html('New text');
If the website inside the iframe is from another origin (or simplified - from another domain), then JavaScript's security policy doesn't allow such operations.
But if the website is from the same origin, then using jQuery call
$("#iframe").contents().find("#divId").html("New text");
but be sure to call it when the framed document is loaded.
wrap that iframe within a div and try this
$('#iframe').parent("div").html('New text');
Related
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
I have an iFrame and there is a anchor tag inside it with target="_blank". (<a href='#' target='_blank'>Link</a>)
What I want is when the page loads, the <a> tag is clicked automatically. I have tried several ways to achieve this with no luck yet.
One more thing, I can only change the code inside of the iFrame. The code of the iFrame is not in my hand.
Because of Same Origin Policy [https://en.wikipedia.org/wiki/Same-origin_policy] browsers won't allow you do this UNLESS the iFrame and the parent page are on the same domain. You may have to try an alternative solution that doesn't involve an iFrame. A good reference to this issue is: https://stackoverflow.com/a/3076648/3188771
Im using an iFrame for a WYSIWYG, and would like to add a button that will align all the content within the iFrame to the center.
I tried adding "text-align:center;" on the class of the iFrame but that did nothing.
How can I do this?
I may be incorrect, but my understanding is that you can't modify the contents of an iFrame, unless you have access to the site where the iFrame's content is coming from.
See this for more details.
To add, using "text-align" will only align the iFrame itself as a whole, but not the content.
An iframe behaves as a separate independent web page, so you'll need to change the HTML inside the iframe. Due to the same origin policy, you can only do this if the iframe content comes from the same domain name as the parent page.
If the domain names do match, you can do something like this in Javascript:
function center_iframe() {
var iframe = document.getElementById('myiframe'),
iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.body.style.textAlign = 'center';
}
This might be too simplistic for your needs (and whether it works depends on the HTML inside the iframe), but here's an example anyway.
Assume we have a window and an iframe with some javascript in it. The iframe sourcecode is defined directly in "srcdoc" attribute of the iframe.
Is it possible to somehow force the browser to behave like the iframe is loaded from another domain?
I mean I don't want the javascript in the iframe to be able to access the main window via "window.parent" or anything like that, because the iframe contents is not trusted. But the problem is that it's stored on the same domain and I even want to use the same request to load both the main window and the iframe contents (with that "srcdoc" attribute).
So is it possible at all?
Thanks!
You could prepend the string:
"<script> parent = top = null; </script>"
To the srcdoc. That should prevent the rest of the code in the srcdoc form accessing the parent through window.parent and window.top.
I'm not sure if there are any other ways to access the parent of an iframe.
I have an iframe embedded on my webpage and I'd like to edit certain parts of it using javascript. Is this possible and how would I do it?
Since the iframe is loading content from another domain — no. You'll hit the same origin policy.
According to the HTML DOM spec (level 2), you can reach the child DOM by using the .contentDocument property of the iframe's DOM node.
But, of course, no browser lets you do that across domains anymore...
You can get the iframe document by doing this:
document.getElementById(iframeId).contentDocument
That is if you own the page loaded in the iframe.