Display html with different styles on one page without interference - css

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.

Related

How to get the XPATH or CSS selector from dynamically loaded website to follow links?

This is a dynamically-loaded website https://www.gelbeseiten.de/suche/hotels/n%c3%bcrnberg.
I'm trying to follow every link from the results. I found //article[#class='mod mod-Treffer']/a to follow the search result links. But the problem is this XPATH works only for a couple of links. For the rest of the others, I don't find any Selector. Because the other are using probably JS to make this action. I'm not familiar with this kind of dynamic website. So, I don't know how to get the selector from this kind of website. Any suggestions will be highly appreciated.
I will post this as an answer, without actually giving you the code, as it might help you more in the long term.
First, load that page in browser with javascript disabled (there are ways with disabling js in browser directly, or use an extension like ublock origin, etc - look it up).
You will notice that only the first 2 hotels are fully loading - the rest are being loaded dynamically by javascript (which in this case is disabled). There are 13 hits for //article[#class='mod mod-Treffer']/a selector, while there are more hotels on that page.
However, each hotel is wrapped in an <article> tag, and that tag has data-realid="[...]" attribute. The url for each hotel would be https://www.gelbeseiten.de/gsbiz/{data-realid}.
This is how you can get all those hotels' profile links.

iframe not showing up on drupal page

I am trying to display another page (external webpage) on my drupal page. My approach is to embed the page in an iframe as follows:
<iframe frameborder="1" height="100" scrolling="auto" src="http://mywebpage.com/specific_page" width="80%"></iframe>
So far I only see the iframe box but the content is not showing up. I've switched between Full HTML, Filtered HTML and Full HTML with IMCE but none worked. I also tried a couple different options from google search but no. Your help is sought pls. Thanks
Fastest solution i think would be using PHP filter module which gives you ability to use custom code without filtration as Filtered and Full HTML filter do.
If you are only one who can add code with PHP filter(do not give this possibility to other users!) you can go straight forward with this approach.
Hope it will fit for you.

How can apply css to externally loading web page using iframe. Is it possible?

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.)

Modify content of iframe

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

Embed asp page without iframe

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.

Resources