iFrame text alignment - javascript

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.

Related

Using Jump Links from Parent Page to an Iframe

I have a parent page that contains an iFrame. The anchors have that have a respective The anchors are outside of the iframe but I want them to be able to work as page jump links.
I've tried adding and targeting the iframe but it still does not work for me.
Any suggestions or recommendations?
In order to target an element inside of the iframe, you'll want to use Javascript and target it like so:
function findText() {
var frame = document.getElementById('iframe').contentWindow;
frame.scrollTo(0,frame.document.getElementById('suchen').offsetTop);
}
Then your markup will be something like this:
<iframe src="http://fiddle.jshell.net/pkvhw/2/show/" id="iframe"></iframe>
Find Text
Where iframe is the id of the iframe on your page, and suchen is the id of the element you want to find within the iframe.
Here is a fiddle of it in action: http://jsfiddle.net/vs9xhs0o/
Note: You will run into issues when trying to use this going across domains. Most sites will not allow you to make cross-domain requests like this, so make sure you have control over the site you are viewing through the iframe.

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 to embed another site into a site on a DIFFERENT domain AND resize the container according to the content

i just wanted an iframe to always have the height of its content. i thought it would be as easy as "overflow:visible" but of course not. then i found codes to actually make this work. but of course they dont work if the content is from another domain... same origin policy and what not.
i cant edit the content im embedding, or whatever its called. i just want the frame to be the same size. i thought this is a pretty basic expectation.
actually, youtube somehow does this with the comments section, but maybe they do cross domain communication or something.
this is really all i need. something similar to an iframe that can adjust its height to the content
code for the iframe:
and the code is this: var f = document.createElement('iframe');
f.src = 'https://apis.google.com/u/0/wm/4/_/widget/render/comments?usegapi=1&first_party_property=YOUTUBE&href=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D' + location.href.match(/v=(.+?)([#&]|$)/)[1];
var e = document.querySelector('#distiller-spinner');
e.parentNode.appendChild(f, e);
e.parentNode.removeChild(e);
it makes the actual comments section on every youtube watch page load instantly, except, the frame's height is never right, so i removed the f.height part from the code
Have you tried using an iframe and setting the height attribute to 100%. This can be done directly in the iframe element. Make sure the html and body elements are also set to 100% for this to work properly.
<iframe style="height:100%;">

Complete isolation of javascript in the iframe from the same domain

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.

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

Categories