Good morning everyone, I want to insert an iframe from a Google Drive document, but I want it to be displayed only in view (they can't edit the document), they can only scroll
I researched on MDN about the iframe properties and I didn't find any answer
Thanks for answers!
If you don't have security concerns and just want make the iframe content readonly, simply apply:
iframe {
pointer-events: none;
}
Related
I wonder if it is possible to get the page title of an url within IFRAME. I tried to use jQuery $('#iframe').attr('title') but that doesn't work. Please help. Thanks.
I think this is what you're looking for:
$(document).ready(function()
{
alert($('#iframe').contents().find("title").text());
});
That will return the page title that is located in the <title> tag of the iframe document that has the id "iframe".
I misread your question.
$('title', frames[frameName].document).text();
If what you are looking for is a way to get the URL of the iframe after the user has clicked on a link within that iframe, this is not possible in any modern browser that blocks cross-domain attempts.
Even though the iframe is part of the DOM and you can easily find the new iframe URL using apps like Firebug, Firefox will throw a XSS error on any attempts by js to directly pull that info.
But for the record, as it's already been said, the location within the DOM of the actual URL of the iframe content is (with a little help from jquery) : $("#id_of_iframe).contentDocument.location.href
I'm not totally sure if the above points straight to it with the above syntax, but that's the gist of it. The part that is a no-no is trying to go inside that contentDocument part.
I am using Google Forms, get an and then I embed into my website code,
I want to custom the form's background, make it transparent.
I am using JQuery,It can read the object create by iframe from google, but if I want to change its class 'ss-form-container's css, it failed.
Can someone show me how to apply CSS to google docs's iframe?
Here is the Link to my test website: http://dive.maxinrui.com/ The questionary is on third slide.
Thanks in advanced!
You can't. Frames are not allowed to interact with each other unless they have the same origin. Since the origin of the Google Docs frame is docs.google.com while your page's main frame is on dive.maxinrui.com, you cannot "touch" the contents of the frame, so there is no way for you to apply your CSS to it.
You can apply some styling to a Google Docs form by applying a theme to it in Docs. If you need more control than that, though, you will need to find another solution.
This would be a workaround solution (if it works).
Would it be viable to copy the form source code from the Google Docs page in the iframe, embed it into your own page, then modify the CSS?
Is there a way to stop an embedded iframe from being clickable or make the entire iframe clickable? I want the iframe to pull the data, but I don't want visitors to be able to click the iframe and be redirected from only one spot on the iframe.
Is that possible? Here's an example of the iframe:
<iframe src="http://www.indiegogo.com/project/157203/widget?escape=false" width="224px" height="429px" frameborder="0" scrolling="no"></iframe>
http://jsfiddle.net/qX4fu/
As your iframe is obviously served by another domain, standard solutions cannot be used. You can't read or modify the iframe nor its document.
But you can put an invisible div over it like this : http://jsfiddle.net/dystroy/Afg3K/
<div id=a></div>
#a{
position:fixed;
top:0;
left:0;
width:224px;
height:429px;
}
But most of the times, those things are forbidden by the iframe inclusion contract. Look at your agreement before you do it.
It is possible, though I would not recommend it.
Messing with default browser behavior such as anchor tag clicks will generally frustrate a user and prevent them from returning to your page.
Furthermore, as dystroy stated in his answer, the legal strings attached to dropping iframes on your page usually explicitly forbids this kind of behavior.
That being said, returning false from an event handler will prevent the browser from receiving the event:
document.getElementById('yourFrame').contentWindow.document.body.onclick = function () {
return false;
};
It is worth saying that this will not work if the iframe is in a different domain than where the script is running from. If that is the case, you will need to construct a transparent overlay div that swallows the click events and absolutely position it over the iframe.
Here is a fiddle demonstrating both approaches: http://jsfiddle.net/qX4fu/1/
If you are using HTML5 I would suggest making use of the new "sandbox" property BUT it is not yet compatible with all the browsers. http://www.w3schools.com/tags/att_iframe_sandbox.asp
In my case I just added "allow-forms" and "allow-scripts" as the sandbox property values and the embedded site no longer redirect and still can run JavaScript
ex: <iframe sandbox="allow-forms allow-scripts" ... /></iframe>
If anyone knows any Cons to using this approach I would love to know about it.
Someone else with same answer: https://stackoverflow.com/a/9880360/1404129 (I ran into this answer later)
Here is the problem! I have an iframe that loads an external website. I want the iframe to resize to 100% based on the content height, so that I don't get a scrollbar. Setting iframe height to 100% does not work.
I came up with two solutions:
Set the document.domain property at both ends to the same domain,
which gives the iframe content access to the parent window. The the
resize method can be initiated from within the iframe.
Use HTML5 postMessage API to take appropriate action. I use to communicate between the two iframes.
Both these approaches are complex. Is there a simpler approach to this problem?
You could embed another iframe into your iframe. If the source of that iframe is from the same domain,protocol and port as the top level iframe then it can access it through parent.parent
I encountered the same problem last year and found a solution that worked for me on this blog:
http://solidgone.org/Set-IFRAME-height-based-on-size-of-remotely-loaded-content
An updated version of that method can be found in his follow-up article: http://solidgone.org/Redux-Set-IFRAME-height-based-on-size-of-remotely-loaded-content
Like jack describes, the implementation requires an embedded iframe into your page with a source of the same parent domain.
I did have a small issue in FF. The solution can be found in the comments of the follow-up article.
Hope this helps!
A simpler solution would be to use this little project on github.
https://github.com/davidjbradshaw/iframe-resizer
I have a page that people load in an iframe (its like a widget they can put on their pages) and I want to see which pages are loading it... is this possible?
No, that's not reliably possible due to the Same origin policy.
(You would have to read the value of parent.location.href, which is not possible.)