We Keep Coding

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!

How To Generate Pdf Stream, Or Send Post Data To Pdf Url and generate it as an html5 object?

I'm trying to generate PDF in a div tag like this.
<div id="pdf">
<object width="400" height="500" type="application/pdf" data="pdftext.pdf" id="pdf_content"></object>
</div>
I am still unable to accomplish this due to my requirements.
request using GET values must not be used.
IFrame must not be used.
no physical file is generated. Only strings.
I tried rendering base64 pdf byte stream using HTML 5 object but still no luck.
<div id = 'pdfHere'>
<object src="data:application/pdf;base64,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Pj4KZW5kb2JqCjcgMCBvYmoKWzEgMCBSL1hZWiAwIDg1MiAwXQplbmRvYmoKMiAwIG9iago8PC9TdWJ0eXBlL1R5cGUxL1R5cGUvRm9udC9CYXNlRm9udC9IZWx2ZXRpY2EvRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nPj4KZW5kb2JqCjMgMCBvYmoKPDwvU3VidHlwZS9UeXBlMS9UeXBlL0ZvbnQvQmFzZUZvbnQvSGVsdmV0aWNhLUJvbGQvRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nPj4KZW5kb2JqCjQgMCBvYmoKPDwvU3VidHlwZS9UeXBlMS9UeXBlL0ZvbnQvQmFzZUZvbnQvSGVsdmV0aWNhLU9ibGlxdWUvRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nPj4KZW5kb2JqCjYgMCBvYmoKPDwvS2lkc1sxIDAgUl0vVHlwZS9QYWdlcy9Db3VudCAxL0lUWFQoMi4xLjcpPj4KZW5kb2JqCjggMCBvYmoKPDwvTmFtZXNbKEpSX1BBR0VfQU5DSE9SXzBfMSkgNyAwIFJdPj4KZW5kb2JqCjkgMCBvYmoKPDwvRGVzdHMgOCAwIFI+PgplbmRvYmoKMTAgMCBvYmoKPDwvTmFtZXMgOSAwIFIvVHlwZS9DYXRhbG9nL1BhZ2VzIDYgMCBSL1ZpZXdlclByZWZlcmVuY2VzPDwvUHJpbnRTY2FsaW5nL0FwcERlZmF1bHQ+Pj4+CmVuZG9iagoxMSAwIG9iago8PC9Nb2REYXRlKEQ6MjAxNTA1MDQxOTU4NDMrMDgnMDAnKS9DcmVhdG9yKEphc3BlclJlcG9ydHMgTGlicmFyeSB2ZXJzaW9uIDUuNi4wKS9DcmVhdGlvbkRhdGUoRDoyMDE1MDUwNDE5NTg0MyswOCcwMCcpL1Byb2R1Y2VyKGlUZXh0IDIuMS43IGJ5IDFUM1hUKT4+CmVuZG9iagp4cmVmCjAgMTIKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAyNDU4IDAwMDAwIG4gCjAwMDAwMDI3NDUgMDAwMDAgbiAKMDAwMDAwMjgzMyAwMDAwMCBuIAowMDAwMDAyOTI2IDAwMDAwIG4gCjAwMDAwMDAwMTUgMDAwMDAgbiAKMDAwMDAwMzAyMiAwMDAwMCBuIAowMDAwMDAyNzEwIDAwMDAwIG4gCjAwMDAwMDMwODUgMDAwMDAgbiAKMDAwMDAwMzEzOSAwMDAwMCBuIAowMDAwMDAzMTcxIDAwMDAwIG4gCjAwMDAwMDMyNzUgMDAwMDAgbiAKdHJhaWxlcgo8PC9JbmZvIDExIDAgUi9JRCBbPDI3YmUwODczMzI5MGQzMTcwMDAzNzUzZmJmNDcwODJiPjw4ZjExZjkwNTJjMTJhZjgzNGM4OWFiOTFmZDU4OGRkYT5dL1Jvb3QgMTAgMCBSL1NpemUgMTI+PgpzdGFydHhyZWYKMzQ0MwolJUVPRgo" type="application/pdf" width="100%" class="internal">
<param name="view" value="fitH" />
</object>
</div>
I have tried using plugins like pdf.js or pdfObject but this plugins won't allow me to pass POST values to the url (as far as I know).
PHP accomplished my task by doing this.
I use header('Content-type: application/pdf') and rendered string like this %PDF-1.4 %âãÏÓ 5 0 obj <>stream xœÅ\ÛrÛ¶}÷Wàí¤3 but they wanted it inside a div tag (not iframe).
Is there any way javascript can render byte stream or plugins which I can post values to URL and render the return and put it inside a div or generate an HTML 5 pdf object?

tried to pass the php file name that genrates the pdf like <object width="400" height="500" type="application/pdf" data="pdfgenrator.php" id="pdf_content"></object>
And to pass data to pdfgenrator.php you have to do it before the whole page load else it will not work

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.

Embed Youtube video in AngularJS generates error when loading the page

The code snippet below is used to embed Youtube video in my page.
<div ng-if="videoUrl != ''" style="height:400px;">
<iframe width="100%" height="100%" src="{{videoUrl}}"></iframe>
</div>
In my controller, videoUrl is first set to an empty string, and updated once data is retrieved from server.
$scope.videoUrl = '';
videoService.getData().then(function(response) {
$scope.videoUrl = response.videoUrl;
});
The Youtube player works and the URL is correct, I can watch the video with the embeded player after the page is fully loaded. What bothers me is each time when loading the page, an error is returned. I can see from the browser console that it was trying to send a GET request to http://www.example.com/%7B%7BvideoUrl%7D%7D with its status as (canceled). This request is not something I want and it fails for sure.
How can I get rid of that weird GET request?

I modified my code based on RGraham's suggestion and the error is gone now.
First, change src to ng-src and the checking condition to ng-if="videoUrl".
<div ng-if="videoUrl" style="height:400px;">
<iframe width="100%" height="100%" ng-src="{{videoUrl}}"></iframe>
</div>
Second, I initialize videoUrl to undefined.
$scope.videoUrl = undefined;
Now the page loads without sending the previous weird GET request anymore.

JS include URL as URL parameter

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