Set Iframe Source on Remote Page via URL Parameter - javascript

I have 3 pages that I am working with.
shop_mobile.php
This page retrieves product data from MySQL db and lists formats it. It accepts the url parameters brand=BRANDNAME and cat=CATEGORY.
Here are two examples of this page in action:
http://solanocycle.com/shop_mobile.php?brand=KYMCO&cat=KYMCO%20Scooters
http://solanocycle.com/shop_mobile.php?brand=peacesports&cat=Peace%20Sports%20Scooter
vehicles.html
This page contains links to view specific product listings pages (i.e. "KYMCO Scooters", "Peace Sports Scooters"). When these links are clicked, they should all take the user to the same page (view.html) but pass URL parameters which tell the Iframe within view.html which url to use as its source.
view.html
This page contains an Iframe which gets its source from the URL parameters passed by the links from vehicles.html
Note:
I tried using the solution provided at How do I pass URL parameter to an iFrame in Wordpress page? to solve my problem, but I have never used jquery before and I was not able to get it working correctly.
Any help would be greatly appreciated.
More Info
Sample of a link from Vehicles.html
KYMCO Scooters
What I think View.html should do:
Extract "http://solanocycle.com/shop_mobile.php?brand=KYMCO&cat=KYMCO%20Scooters" from the url "view.html?http://solanocycle.com/shop_mobile.php?brand=KYMCO&cat=KYMCO%20Scooters" and store it as a variable called $embedLink.
Display an Iframe with $embedLink as its source url.

Assuming your link(s) on vehicles.html are well structured, as follows:
view.html?url=http://solanocycle.com/shop_mobile.php?brand=KYMCO&cat=KYMCO%20Scooters
The necessary jQuery for view.html would be:
<script type="text/javascript">
$(document).ready(function(){
var regex = /\?url=(.*)/,
$embedLink = document.location.href.match(regex)[1];
$('iframe').attr('src', $embedLink);
});
</script>
Obviously you would replace 'iframe' with an id or class of the iframe to be more specific.
The alternate would be to use php to extract the request parameter and echo it out in place of the iframe's src attribute:
<?php $embedLink = (isset($_GET['url']) ? $_GET['url'] : ''); ?>
<iframe src="<?php echo $embedLink; ?>"></iframe>
I would recommend performing sanitisation of the request parameter in both cases in order to prevent XSS.

Related

Get YouTube Profile Icon From YouTube Username

I'm making a small application, and would like to integrate a YouTube section.
I already have a way of getting the channel name seen in the URL buy using:
<?php echo $user['username']; ?>
The username is always the YouTube channel name. Now that YouTube is hooked up with Google+, the icons are based on Google plus.
herefore, the link to a channels icon isn't simply http://data.youtube.com/youtubeusername/icon.jpg or something (that is made up).
The icon URL is more like:
https://yt3.ggpht.com/-wJihGYNAGRE/AAAAAAAAAAI/AAAAAAAAAAA/ZVJ8gCn1JcU/s100-c-k-no/photo.jpg
I'm looking for someone who can tell me how to retrieve a channel's icon based on their YouTube username, and how to implement that into my existing page.
You can get the users image by using a url like this:
http://gdata.youtube.com/feeds/api/users/communitychannel
You can get just the username and image thumbnail by appending a query string as described in the partial responses api: ?fields=yt:username,media:thumbnail
You can get the response in json format to use easily in javascript by appending: &alt=json-in-script&format=5
You can also specify a callback to execute when the response has loaded by appending: &callback=showImage
Your url now looks like this:
http://gdata.youtube.com/feeds/api/users/communitychannel?fields=yt:username,media:thumbnail&alt=json-in-script&format=5&callback=showImage
To use this in a page put it in a script tag like so:
<script type='text/javascript' src="your_url"/>
and the callback should look like this:
function showImage(data)
{
var name= data.entry.yt$username.$t;
var url = data.entry.media$thumbnail.url;
$(document).append("<img src='"+ url +"'/>");
}
You must make sure that the showImage callback function is defined before you load the data.

How to append the HTML results of a URL call to the DOM?

I have a URL that resides on another domain, like this:
http://ads.adserver.com/ad?site=1233&zone=45435
When you type this URL in the browser, the result is HTML like this:
<img src="htt://ads.adserver.com/i/image.gif" border="0"/><br/>Test
The above renders as an image wrapped in a link with a second link below it.
I tried to capture this URL in a script tag and append it to the DOM, but it does not render the HTML above.
var ad_script = document.createElement('script');
ad_script.type = 'text/javascript';
ad_script.src = 'http://ads.adserver.com/ad?site=1233&zone=45435';
li.appendChild(ad_script);
Are there any other ways of invoking this URL and putting the result on the page? I can't use $.getScript() since I'm not invoking this in the global context. I need this HTML to appear exactly where I want it to appear.
EDIT: The only reason I am trying this route is that the third-party does not provide a JSON-P interface.
EDIT2: Unfortunately, I am not on an application server.
EDIT3: This is for iPhone.
You are limited to how you load this due to cross-domain issues .. an easy way would be to load the image in it's own iframe
<iframe src='http://ads.adserver.com/ad?site=1233&zone=45435' height='200px' width='200px' />
You'll want to use ajax for this. The easiest way might be jQuery's .load() method.
Assuming the element you want the content to go into has an id of holder, you would do
('#holder').load('http://ads.adserver.com/ad?site=1233&zone=45435')
It will put the contents of the webpage into your selected element. http://api.jquery.com/load/
edit: Sorry, forgot cross-site ajax limitations. You could instead set up a php page like:
if(isset($_GET['url'])){
echo file_get_contents($_GET['url'])
}
and then do
('#holder').load('http://yoursite.com/yourpage.php?url=http://ads.adserver.com/ad?site=1233&zone=45435')
Take the jsonp approach. use an actual script tag and put an executing javascript function as the response that adds that html markup to the dom. It will add it to the dom of the page where the script tag resides.
There are a number of jQuery ajax calls that can accomplish this, for example:
jQuery.get('http://ads.adserver.com/ad?site=1233&zone=45435', function(data){jQuery(updateElementQuery).html(data);});
Try to use jquery method 'load'
`$('#result').load(url, function(response) {
$('#my-li').append($('#result').html());
$('#result').html(null);
});`
... where #result is some hidden div

Open link to specific domain within an iFrame in a new window

I need to be able to open a link to a specific URL that is within an iFrame; the link is generated by php and I can't change the source code, so I need to change the link in the iFrame dynamically, if possible.
What I'm doing is this: on a non-profit organization's site, I have an affiliate store (generated by php) displayed within an iFrame on a page in order to make it more styled with the rest of the site. The php store pulls products from an affiliate service; the link to the store.php is in the same domain as the main non-profit's site.
The problem is the final "Buy Now" link from a product opens the final destination e-commerce store within the iFrame, and as such the page is stuck in the iFrame and looks bad and one must scroll V and H to see it and check out.
The link I need to open in a new window always has the class "av_buy_now" I have access to the CSS file, which I can change. I have access to the PHP files, i.e. shop.php, but it doesn't appear that the final link is generated locally. I'm showing the iframe this way:
<iframe src="http://nonprofit.org/shop/mj/shop.php"></iframe>
Is it possible to use jQuery or Javascript to find the links to mydomain.com with that one class and add a new window attribute to them? Or is there a better way? Thanks
Without some code I don't know the exact structure of your code, but I this could do the job. It requires jQuery to be in the iframe too.
$('iframe')[0].$('.av_buy_now').filter(function() {
return $(this).attr('href').indexOf('mydomain.com') > -1;
}).attr('target', '_blank');
You can change it if some how you can manage to execute this kind of code, changing class is little troublesome, of you got an id on it do something like this.
PAGE.html:
<button onclick="openinnewwin()">Get It</button>
<iframe src="test.html" id="ifrm"></iframe>
<script language="javascript">
function openinnewwin(){
ob=document.getElementById('ifrm');
if ( ob.contentDocument ) {
ob.contentDocument.getElementById('a').target="_blank";
}else if ( ob.contentWindow ){
ob.contentWindow.getElementById('a').target="_blank";
}
}
</script>
test.html:
Hello

get the parent url of iframe in PHP

I am creating a widget that would load in a IFrame and users will be able to place the widget on their own website. How would I get the URL of the website that is using the IFrame in javascript and/or PHP? The IFrame loads a php file.
I have tried "parent.top.location.href" and "parent.document.referrer" in the IFrame page but that is undefined.
I have also tried to echo "$_Server[referrer]" in the IFrame page and that did return the IFrame parent URL, but how easy is it for someone to manipulate the referrer variable? I dont want to get misleading information.
The Goal: I created a widget and want to allow registered users to use that widget on their site. I want to be able to find out who is using the widget and if a un-registered user is using it on their site, then the widget would not display
I have also tried to echo
"$_Server[referrer]" in the IFrame
page and that did return the IFrame
parent URL, but how easy is it for
someone to manipulate the referrer
variable?
Pretty easy, but so is disabling JavaScript! However, if a web site uses your <iframe> it will be a little difficult for them to fake the referrer in their visitor's UA. (They could also proxy your content if they really insist on hiding the fact that they're using your content. In that case your only choice is not to publish it in the first place.)
In order to present content for "partners" only you could consider providing them with a token (like Twitter/Google/... APIs). If no (or an invalid) token is used, present an error. If a valid token is used but the referrer is suspicious you should investigate further.
Try with:
parent.location.href;
or
parent.document.URL
You can use the following PHP code to have the parent window URL get values in an array:
<?php
//Getting the parent window parameters
$getURLVar = str_replace("?","",strrchr($_SERVER['HTTP_REFERER'],"?"));
$getURLVar = str_replace("&","=",$getURLVar);
$getURLVar = str_getcsv($getURLVar,"=");
$i=0;
foreach ($getURLVar as $value)
{
if ($i % 2)
$value1[$i]=$value;
else
$value2[$i]=$value;
$i++;
}
$getURLVar =array_combine($value2,$value1);
print_r($getURLVar);
?>
A small piece of JavaScript in the iframe-d page can 'un-frame' the page:
if (top != self) {top.location.replace(self.location.href);}
Otherwise, as #mck89 says: the iframe can access the URL of the parent page using the top.location.href.
Further reading on the question How to prevent my site page to be loaded via 3rd party site frame of iframe.
Assuming your widget's URL doesn't do any redirects, etc., you should be able to use:
document.referrer
from within the javascript inside your iframe and it should contain the URL of the parent page. This seems to be what YouTube does for tracking in their iframe embed codes.
I would use:
$qStr = explode('?', $_SERVER['HTTP_REFERER']);
$t= explode('&', $qStr[1]);
foreach ($t as $val)
{
$a = explode('=', $val);
$args[$a[0]]=$a[1];
}
// to check the arguments
print_r($args);
// to check the url
echo $qStr[0];
$args would contain my security token which would be checked by some hashing against the url

iframe query string

I have got the values by passing the query string in an iframe.src = "xyxz.jsp?name="+name+"&pass="+pass+"&id="+id.
I need to pass those values which i have got to another jsp page
<iframe src="xyz.jsp"></iframe>
How can i do that?
Your question is unclear, but I guess that you want to pass the querystring of the parent JSP page to the JSP page which is in an iframe of the parent JSP page. If so, then just print HttpServletRequest#getQueryString():
<iframe src="page.jsp?${pageContext.request.queryString}"></iframe>
That said, iframes are an extremely bad practice and very clumsy when all the pages are located at the same server. Rather use server side includes using <jsp:include>. This way the included JSP has access to the same request object.
Use Javascript to dynamically change the src attribute of frame
function changeSrc()
{
window.frames['testframe'].src = "xyxz.jsp?name="+name+"&pass="+pass+"&id="+id;
}
Is this what are you looking for?
according to your cooment to #Manjoor post you want to call javascript function which is defined inside iframe and pass the parameters to it, if that so check this post
Invoking JavaScript code in an iframe from the parent page

Categories