JS include URL as URL parameter - javascript

I have this script in JS which uses URL parameter for image location, it works fine when image is located in the same place as the script like below
<iframe src="pan.htm?image=img1.jpg" ></iframe>
But I need it to get the image from other location, how do I do it I tried the way below but it doesn't work this way (url is just an example)
<iframe src="pan.htm?image=http://someaddress.com/img1.jpg" ></iframe>

You need to encode the url. You can do this by running this script:
prompt('Here is your completed code:',encodeURIComponent(prompt('Enter the url to encode','')));
You can try it out here: http://jsfiddle.net/zenr8/
The encoded URL that the script gives you is the thing you need to enter into the URL parameter. In your case, the iframe would look like this:
<iframe src="pan.htm?image=http%3A%2F%2Fsomeaddress.com%2Fimg1.jpg" ></iframe>
If you need to enter something in an URL parameter from a script, you should always make sure that it's properly encoded. You can do this by using encodeURIComponent. If you then need to decode it for further usage in your script, just use decodeURIComponent again. For example:
alert(encodeURIComponent('http://google.com/?hl=en&q=search'));
//alerts http%3A%2F%2Fgoogle.com%2F%3Fhl%3Den%26q%3Dsearch
alert(decodeURIComponent('http%3A%2F%2Fgoogle.com%2F%3Fhl%3Den%26q%3Dsearch'));
//alerts http://google.com/?hl=en&q=search

You need to urlencode the parameter.
<iframe src="pan.htm?image=http%3A%2F%2Fsomeaddress.com%2Fimg1.jpg" ></iframe>
This could be done using php for example:
<iframe src="pan.htm?image=<?php echo urlencode("http://someaddress.com/img1.jpg"); ?>" ></iframe>
Or with javascript itself:
var iframe = document.createElement("iframe");
iframe.setAttribute("src","pan.htm?image="+encodeURIComponent("http://someaddress.com/img1.jpg"));
var wrapper = document.getElementById("iframe_wrapper");
wrapper.appendChild(iframe);

Related

Changing an iframe SRC dynamically

What I have and I need to do it work properly is when I'm in a "start page" and I click a button like this:
PAGE-1
Point A
It should send me to "another page" where I load dinamically an iframe taking each variable (shopID, type, max-levels and point) from the URL and print it like an iframe this way:
PAGE-2
<iframe id="frame" src="http://myappwebsite/resourcesiframe?shopId=3366&type=image&point=A" width=“XXX" height=“XXX"></iframe>
I've used this javascript snippet but anyway, I can't make it work properly at all.
$(".map-button").click(function (e) {
e.preventDefault();
$("#frame").attr("src", $(this).attr('data - iframe - src'));
});
I only need to get the variables from the data-iframe-src and use them in the iframe, but I'm not able... The problem is that I load elements in different pages, so I don't know how this affect to the URL variables.
I've founded a simple solution for my problem here and it works for me.
First of all I put this simple iframe in my PAGE-2:
<iframe id="frame" src="" width="100%" height="auto" frameborder="0" scrolling="yes"></iframe>
Then in PAGE-1 I've used this type of links:
https://myappwebsite/page-2?shopId=1234&type=image&max-levels=1&point=A
So now my PAGE-2 loads properly with these params in the URL. Then I've used this simple snippet in Javascript to fill my iframe in PAGE-2:
<script type="text/javascript">
$( document ).ready(function() {
$("#frame").attr("src", "https://myappwebsite/resourcesiframe" + window.location.search);
});
</script>
And it works! Now I can go to PAGE-2 with all my params, pick them and use them in SRC inside the blank iframe.
Thanks for getting me in the correct path!

Iframe doesn't resolves the value from controller after the first load

I am using angular js frame work and has an iframe tag inside a ng-dialog. I am passing the src as
var SrcUrl=staticurl+dynamicUrl;
$scope.IframeSrcUrl=$sce.trustAsResourceUrl(SrcUrl);
and at the html
<iframe src="{{IframeSrcUrl}}" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false" height="350px" width="100%" ></iframe>
The iframe will resolves the proper url on its initial load.. but once if i close the ng-dialog and again open it; it will consider the "IframeSrcUrl" as string take it as a param for my base url and will return a 404 error.
i have tried ng-src instead of src.. but it also didn't works..
here staticurl is an externally hosted site and dynamicUrl is a dynamic genarated parameter. whenever i do some action , for instance a button click i need to start the ng - dialog box which redirects to the IframeSrcUrl via iframe.
now the problem is that , on second load the iframe considers IframeSrcUrl as a string and try to redirect to
"http://localhost:1337/%7B%7BIframeSrcUrl%7D%7D"
On load event of the dialox box, try this :
document.getElementById('frame2').src = document.getElementById('frame2').attr('data-src') and put the attribute data-src={{IframeSrcUrl}} on your iframe.

change iframe to script includes the iframe

I have this part of code:
<div class="embed"><iframe id="iframe" src="<?php echo DOMAIN_NAME; ?>demo?q=<?php echo $number;?>"><body></body></iframe></div>
and i want to make an asychronous script that includes this iframe. So in the end i will give in my clients the asynchronous script code instead of iframe. I want to do that for 1 main reason. In case my website is down i don't want to decrease the speed of the websites/portals that my clients have post my iframe.
when somebody clicks on embed div then an iframe given to my clients. i want to give an asychronous script instead of this iframe.
Is it possible?
Any ideas?
You mean something like
var cosnikFrame = document.createElement("iframe");
cosnikFrame.width=450;
cosnikFrame.height=300;
cosnikFrame.setAttribute("scrolling","no");
cosnikFrame.style.border=0;
document.body.appendChild(cosnikFrame);
cosnikFrame.src="http://example.com/demo.php?q=12aA1b35A4a";
or to defer to after load using for example jQuery:
$(function() {
$("body").append('<iframe width='450' height='300' scrolling="no" style="border:0" src="http://example.com/demo.php?q=12aA1b35A4a"></iframe>');
});

Unable to change HTML iframe source with Javascript

I'm trying to have a 'video of the day' on my website. I currently have most of this working, and here's how I plan to have it working in the end:
Have a Python script run once every 24 hours to pick the random YouTube video of the day
Write the embedded video URL to a text file
Use Javascript to access the text file and grab the video URL, and use it as the iframe source on my webpage
As I mentioned above, this plan is currently working for the most part. My script is able to pick the random video, and write it to a text file. My web page is then able to pull the video URL from the text file, and write it to the webpage in text form. However, I'm having some troubles having it write the video URL to my iframe.
I did some searching, and people suggested trying the following code:
<iframe id="mainvideo" width="720" height="480" frameborder="0" src="" allowfullscreen></iframe>
<script>
document.getElementById("mainvideo").src =
finalresult + ReturnURL();
</script>
So earlier in my code, I declared the variable 'finalresult' to be the following value: //www.youtube.com/embed/WJDnJ0vXUgw
When I have Javascript write 'finalresult' to my webpage, it will write the video URL as text to the webpage as expected. However, when I try and declare it as the source for the iframe, I end up with a blank iframe on the page.
Does anyone know what the problem is with my code for it not showing this video in my iframe? Any help would be appreciated.
You must be changing the src after any particular event is fired. So try this way,
HTML :
<iframe id="mainvideo" width="720" height="480" frameborder="0" src="http://www.bing.com/" allowfullscreen></iframe>
<button id="changeSrc">Change iFrame</button>
javaScript :
var iframe = document.getElementById("mainvideo");
changeSrc.onclick = function(){
iframe.src = "http://www.w3schools.com/";
};
jsFiddle
Update 1 :
If you want to change the iframe src attribute after page load then go with this way,
window.onload = function(){
var iframe = document.getElementById("mainvideo");
iframe.src = "http://www.w3schools.com/";
};
jsFiddle
If myframe.src does not work for you, then try out myframe.contentWindow.location.href like in this pen.

How to stream an image from PHP for tracking purposes

With affiliate marketing and PHP, I know how to make a tracking pixel like this:
<img alt="" src="http://example.com/pixel.php?tracking=43233" />
Then, in pixel.php I do something like:
<?php
$sTrack = # $_GET['tracking'];
$sTrack = urldecode($sTrack);
$sTrack = strip_tags($sTrack);
$sTrack = trim($sTrack);
// do something with sTrack here
header('Content-type: image/gif');
readfile('images/invisible.gif');
Trouble is, on this offer page I'm receiving cname and cemail as query params on the URL, and the customer is hosting on something that doesn't support PHP but does let me insert Javascript, and I CAN'T use jQuery in this case. Instead, I need to do this in 100% pure Javascript. So, I can't read $_GET to pick up the cname and cemail.
I know that location.search will give me those parameters. I just need how to change the IMG tag so that like on a load event I can pass the location.search on the end. And I need it to work across all the browsers since IE7 and up, as well as Opera, Safari, and Chrome.
You can just use the http://example.com/pixel.php as the img src, and then check the referral in that PHP script.
Use Javascript to set image source.
<body onload="document.getElementById('tracking_pixel').src='http://example.com/pixel.php'+location.search;">
<img id="tracking_pixel" src="" />
</body>
Edit:
Yes, you can make it shorter by putting it in the img's onload. You can even drop the id and the this keyword. However, you cannot have the initial src to be empty, in fact, it has to be a valid image for it to trigger the onload event. The problem with this is that you incur the cost of a request over the network.
Here is the shortest I could muster, instead of repeating the url, I used += but that meant the onload handler had to be cleared.
<body>
<img src="http://example.com/pixel.php" onload="onload=''; src+=location.search;" />
</body>
Alternatively, you can use data URI. Unfortunately, the data URI for just 1 pixel is pretty long.
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNgAAIAAAUAAen63NgAAAAASUVORK5CYII=" onload="src='http://example.com/pixel.php'+location.search;" />
</body>

Categories