If I have and iframe in html page, and within that iframe I need to remove a img tag.
Is it possible to manipulate contents of iframe that loads an external site?
cheers
native security in browsers makes this quite difficult, but it can be done with cross domain messaging; take a look at this library : used it many times; it simply works
Related
I used a <iframe> in my web page and its loading takes a long time, even more than loading main web page, Any body could say what are advantages of using <iframe> in a webpage?
And can use another tag instead <iframe>
Iframes are the only cross-browser way to provide html components that are truly separated. So this is their advantage.
But iframes are heavy and do not easily integrate. You may look at the emerging Shadow Dom for an alternative.
There could be more options in your case, but you would have to elaborate.
As you said your iframe content is loading slower than your page, it is the main advantage I have came across for iframe. if you render the things on your page instead of iframe it will take the same time to load the whole page as that of iframe. Your page will be slower.
Second one is , some of the social media buttons are coming in the form of iframe like facebook like and share buttons.
I would like to add a page(a market watch ticker) from other website which is given by client using iframe. but its color not matching my website. how to match it. is there any way to match it??please help?
You can get the iFrame to inherit the parents CSS and javascript see this question:
Iframe inherit from parent
But you need access to the iFrame markup to do this, otherwise I believe it is not possible (and probably shouldn't be for other reasons like security etc.)
I'm trying to display several pages (ex.: google.com, yahoo.com ...) on one page. I'm pulling the html of those pages using cURL multi, and then showing all the results on one page for me to see. The problem is that the first page's css messes up all the lower page's css.
Ex.: Yahoo is the first page and has a pretty diverse CSS styling, the next is MSN, which overrides most CSS, but not all of it, and it looks weird.
Any solutions? Thanks
As much as I hate it, but using iFrames is perhaps the quickest way you can do this.
The better option is the harder one where you would add prefix in your styles or classes in the ones that don't have.
So if the first site defines H1 and then the second site defines H1 differently, you would do H1.firstsite and then H1.secondsite, etc and then in the HTML add class to all H1 tag's.
To be on the safe side, do the similar manipulation to all classes/Ids as well, that way there is no chance of conflict.
PS: Some content may not be shown in an iframe.
you have to use this..
<iframe src="http://www.google.com" width="600px" frameborder="0px"></iframe>
<iframe src="http://www.yahoo.com" width="600px" frameborder="0px"></iframe>
<iframe src="http://www.bin.com" width="600px" frameborder="0px"></iframe>
I suggest using iFrames to load separate pages (or a single page with different query strings) where the content retrieved with cURL. Basically split the cURL operations and access them with iFrames.
That's the simplest and most straight-forward way I see, with least amount of changes to the work you have already done.
The question of how to make your iframe fit 100% of your content (using JavaScript) has been answered on the forum already... for iframes displaying content from the same domain only.
My questions: Is it possible to resize an iframe to fit the content when the iframe src attribute is for a page outside of the domain of the page containing the frame? The browser security features surrounding cross-site scripting prevent me from accessing the document object for the iframe.
I'm looking for any creative solution. One of my thoughts was to somehow detect that scrollbars were visible on the iframe, and to incrementally increase the height until they weren't. Unfortunately I can't find any way to detect visible scrollbars either. Ideas?
Please note that I am looking for a client-side solution.
Responses:
Dave
The problem still exists - I don't know the height of the remote document ahead of time, so I can't set it from a database or querystring value.
dusoft
100% on the iframe in CSS will not set it to 100% of the content inside the iframe, but relative to the the page or containing element (i.e., a div or something).
(My answer to a similar question)
It is not possible to do this without some control over the page being iframed because of the browser's security model. If it was possible, that would be a security problem and would have to be fixed.
Although letting the embedding site know the height of a third party webpage when embedded in the page seems harmless, this can leak information to the embedding site that the browser's user wants to keep private. For example, http://www.facebook.com/ renders differently depending on whether or not you are logged in, so if my website can work out the height of <iframe src="http://www.facebook.com/"> then I can work out whether or not you are a facebook user, something you probably don't want me to know.
The information leakage would be similar to the infamous CSS History Leak which browser vendors had to plug.
Is it possible to resize an iframe to fit the content when the iframe src attribute is for a page outside of the domain of the page containing the frame?
It is possible to get around the cross-site limitation and have an iframe set to the height of it's content, but it can be a bit awkward to get it to work.
The solution involves working around the security model by having the iframed content itself iframe a page on the the same server as the parent page, with which it can communicate. I've answered a similar question to this before here, which goes in to a fair bit of detail on the ins and outs of setting it all up.
The caveat on the described approach is that you must have means of getting your iframed content to itself iframe a page on the parent server. This is usually achieveable when the iframed content is there as part of an agreed partnership between sites, but YMMV.
It sounds like you are trying to work around a security feature that was put in place for a good reason...
Does the resizing have to be through script? You could redirect to a page where the size of the iframe is taken from a querystring, or a database, or config file, etc.
This is theoretical as I have not tested it:
1) PHP save the remote page into a
local html file using
file_get_content() or using CURL. 2) Javascript load local file into
iframe
- it's now local and security issues don't apply.
If there are javascript vars or Session vars (which cannot be pulled from remote content) you can at least use this technique to query the document height of your local file, set the iframe accordingly, then load the remote URL into the resized iframe.
Cavat: you have no way of knowing URLs for page changes within the remote page, therefore you can only use this technique on the first page. If the remote pages are all same height this is no problem.
not the best solutions but you can try:
javascript to write iframe, in iframe app set the current height in url #h700 for 700px etc; then use a loop to listen for that change on host site "in the javascript" to read the src="url#h700" and set the height of the iframe by that.
I want to embed an .asp page on an html page. I cannot use an iframe. I tried:
<object width="100%" height="1500" type="text/html" data="url.asp">
alt : url
</object>"
works great in ff but not ie7. Any ideas? Is it possible to use the object tag to embed .asp pages for IE or does it only work in ff?
I've solved it in the past using Javascript and XMLHttp. It can get a bit hacky depending on the circumstances. In particular, you have to watch out for the inner page failing and how it affects/downgrades the outer one (hopefully you can keep it downgrading elegantly).
Search for XMLHttp (or check this great tutorial) and request the "child" page from the outer one, rendering the HTML you need. Preferably you can get just the specific data you need and process it in Javascript.
You might be able to fake it using javascript. You could either use AJAX to load the page, then insert the HTML, or load "url.asp" in a hidden iframe and copy the HTML from there.
One downside (or maybe this is what you want) is that the pages aren't completely independent, so CSS rules from the outer page will affect the embedded page.
Well, after searching around and testing I don't think it is possible. It looks to me like IE does not allow the object tag access to a resource that is not on the same domain as the parent. It would have worked for me if the content I was trying to pull in was on same domain but it wasn't. If anyone could confirm my interpretation of this it would be appreciated.