Display an iframe when hover certain content in a website - javascript

My team is developing a widget/sdk so people can embeed our code in their sites and display some useful things.
My question is:
once these owners embeed our code, is there a way for us to target certain content in their website?
We want to, for example, if the content in such sites include a hashtag with a word (say #stackoverflow), when the final user hovers that hashtag display an extra iframe on top of it, like a tooltip in the top of the word.
Is this doable?
We thought about creating a chrome extension so any the final user can have that functionality, but we're also wondering if that is doable when the 3rd party site embeeds our code too.
Thanks!
edit: just to clarify, the owner of the site has to embeed a .js file in their site to display our iframe.

Related

A live view of an external website

How do you get a div that is populated with a live screen image of an external website without using iFrames? e.g. www.google.com
I want to produce a portfolio website, I have a number of sites that are regularly updated. What I want to do is have javascript open on page load, I want it to find a specific external site (e.g. www.google.com) and then take a screenshot. Then I want it to display the screenshot on my portfolio page. Or show a live view of the website inside a div. I dont want to use iFrames as I feel it just looks out of place. I don't need the JS to save the screenshot, just to display it.

Is it possible to get url of child iframe with PHP after user navigates?

We are building an educational tool whereby students opens a website in another tab/window and then searches around the other site. Once finding the information they enter the url of the page they were on into a box. Its a bit clunky and what we want to do is allow them to open the new site (bbc.co.uk for example) within an iframe that has a header at the top allowing htem to return to their workbook.
When they navigate around the BBC site, we would like for them to be able to click a button on our frame which grabs what url they are on and some other info like page header etc and insert that automatically into their workbook.
However I cant seem to find how to grab the url of the page being viewed within the iframe. As we send them to bbc, I can get the source id easily enough but as soon as they start moving around the bbc site doing their research there is no way for the parent iframe (on our domain) to see what page they are on?
I know this is not possible in JS due to XSS issues, but was wondering if there is a workaround. Or any other way to grab the url. Currently our way of doing things is clunky, we want to make the tool a lot more easier.
Thanks
Paul

Javascript integrated web browser?

I have two different questions I would like to ask. I am new to javascript and I am trying to create a project ... of some sort.
Firstly, is it possible to have an integrated webbrowser within ... say a PHP page? e.g. using javascript, I have a canvas sized 500 x 700 within my "index.php" page, and can navigate to any website while remaining on my "index.php", but the websites appearing on that canvas?
If this is not possible, then is it possible to navigate to a website, and then interact with the elements thereof? I doubt this because you would no longer be connected to your file if you rediirect to another website, hence the integrated idea.
If neither or those are a possibility, then is it at all possible to interact with an EXTERNAL website's elements? External being not yours in this context.
You can use an iframe tag to load an external page, however
With most modern browsers you're not allowed to interact with the elements for security reasons
Many sites (still for security reasons) don't want to be loaded inside an iframe and they try to either escape the iframe or just render back a blank page instead.
One security problem is that a malicious page could open an iframe with e.g. a buy page of amazon.com and then render over it another opaque element that lets the click go through it.
This way a user may be tricked into click over a "watch the cute kitties" button and instead is clicking on the one-click-buy button of amazon (or liking a facebook page, or starting following a spammer on twitter or ...).

Get data from one website and show it in another website

Our client has two websites and they share one common section, he wants us to pick data on the fly from one website and display it as it is in the other website, excluding the header and footer. I tried using an iframe but the page contains Flash and it does not show the Flash content in the child website. Using an iframe I was able to show the entire website (Flash didn't load) but I don't want the header and footer.
Any help would be appreciated.
Note : We don't have database or code access to the parent web site from where we are picking the data.
didn't quite understand your Note..
Considering you can add some code to both sites and you want to show only part of the site -
assume you have siteA and siteB here is a simple solution:
siteA can open an iframe that hosts siteB with a url param like ?sendSiteA=true
in the js of siteB, when parsing this param you will have a function that will grab section that you want to show, append it to the body and hide everything else.
this is not the best way to share data, but it will work.
P.S. you can pass the dimensions of the iframe in another url param and adjust the dimentions of rht section in siteB

Overlay a frame on every webpage a visitor visits?

So I want to be able to have a space that overlays content on any website with the click of a button (something that also is above everything on a web page). An example would be the Google Translate page, http://translate.google.com/translate?u=about%3Ablank&hl=en&langpair=auto|en&tbb=1&ie=UTF-8 where the frame at the top will overlay any website that is entered in the url box.
What I want to do is have a box like this overlay every webpage, like google's translate does, but have it hide with a click of a floating image, say an arrow.
The files will be locally stored on my HDD, but I don't see this being an issue.
I don't know what languages to code this in, but I assume Javascript, however, I do not know the classes to call to do this. Any advice chaps? I'm not asking for a hand out, just a point in the right direction!
It looks like you want to develop a browser extension. Look here for Chrome:
http://code.google.com/chrome/extensions/getstarted.html
There are similar ways to do it for IE, FireFox, and Safari.
It sounds like you'll either need to use frames or an iframe. They are very similar in how you interact with them (say to make them load a new page) although they are different in their implementation.
A great site for learning about frames is w3Schools:
http://w3schools.com/html/html_frames.asp
http://w3schools.com/html/html_iframe.asp
You can use JavaScript to reference the frames via its name or its ID. Ex: document.framename.src = 'hello.php' or document.getElementById('frameId').src = 'hello.php'.
One problem with using frames is that search engines don't like them. If you are using an iframe, the search engine will search your page, but still not the iframe.
As for resizing/hiding the frame/iframe, you can do that with both frames and an iframe, although the method for accomplishing it varies depending on what you use.

Categories