I have a url which will showing in iframe
<iframe width="250" height="200" frameBorder="0" data-href="http://localhost:8080/webapps/testauth.jsp?appID=a71c5859-03eb-4c16-ac08-1cac24ed2a1d"></iframe>
If I paste the above code into any web site, it will showing the widget into the site such as Facebook plugin.
But now my job is to change it from the iframe to css div. I don’t have too much knowledge of UI part and facing problem can any help me please.
change should be something like this
<div class="something"data-href="http://localhost:8080/webapps/auth.jsp?appID=a71c5859-03eb-4c16-ac08-1cac24ed2a1d" data-width="292" ></div>
You will need to do a cross domain ajax request for that. It is done in following steps
Build the ajax request in a js and put it on the domain from which you want to publish your widget
Add the script to the page on which you want your widget to appear. Make sure that you set the source of the file to the owner domain and do not copy the js file locally. It is necessary otherwise browser will raise security warning and will not allow it.
Call the function included js to perform the request and fetch the content from originating domain.
This will make the process of adding the widget a bit more difficult but the div will not allow you to load content from any domain (only iframes and frames can do that).