Develop Reference

Displaying a specific page of PDF inside iframe in Asp.net

I have an ASP.NET C# application. I am displaying a PDF file at a specific page inside an iframe. I need to display a specific page of PDF based on a text box value. How can I achieve this ?
The iframe code looks like this:
<iframe runat="server" id="lobjPDFObj" height="600" width="800" > </iframe>
and following is the the details of the text box
<asp:TextBox ID="txtTo" runat="server" Text="1" class="page_txtbox" onfocus="synchronizePDF(this);" ></asp:TextBox>
Details of javascript function
function synchronizePDF(Field) {
//parent.document.getElementById('lobjPDFObj').setCurrentPage(Field.value);
var childiFrame = parent.document.getElementById('lobjPDFObj');
var URL = childiFrame.contentWindow.location.href;
//var URL = childiFrame.src;
var pos = URL.indexOf('#page');
if (pos < 0) pos = URL.length;
var result = URL.substring(0, pos);
if (URL != 'about:blank') {
result += '#page=' + Field.value;
}
childiFrame.contentWindow.location.reload(true);
childiFrame.contentWindow.location.href = result;
//childiFrame.src = result;
//parent.document.getElementById('lobjPDFObj').setAttribute("src", result);
}
But this is not working. It is giving error at "childiFrame.contentWindow.location.href" as The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
How can i get rid of the error? And i am passing page no as a paramter in the url. How can i show the new page without refreshing entire content?

As stated here: The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match and here: Error trying to access a iframe in JavaScript the iframe can show content from other side, but you cannot change it in any way, because it would cause security risk. If you want to change the content of the iframe it source must come from same domain (refer to CORS for more reference).
Another way is to allow Cross-Origin Resource Sharing for other domains. In order to do that you need to specify special header:
Access-Control-Allow-Origin: https://www.test-doc.com
More info about this topic: http://enable-cors.org/server_aspnet.html, http://docs.asp.net/en/latest/security/cors.html.

In both methods shown below, a local PDF is opened in an iframe, at the selected page number, when the focus leaves the TextBox.
Method 1
In this method, the iframe source URL is set in two steps. The first step resets the source, the second sets it to the actual URL. This second step has to be performed asynchronously in order to work (here with the help of setTimeout).
The markup for the iframe and the TextBox:
<iframe id="iframePdfViewer" name="iframePdfViewer" width="700px" height="700px" ></iframe>
<asp:TextBox ID="txtPageNumber" runat="server" Text="1" onchange="showPDF(this.value);" />
The Javascript function:
function showPDF(pageNumber) {
var iframe = document.getElementById("iframePdfViewer");
iframe.src = '';
setTimeout(function () { iframe.src = 'MyFolder/MyDoc.pdf#page=' + pageNumber }, 0);
}
Method 2
In this method, the iframe is replaced by a new one each time a new page of the PDF is to be displayed. In order to reduce screen flicker: (1) the new iframe is inserted under the old one, and (2) the old iframe is removed only when the new one is fully loaded.
The markup:
<div id="divPdfViewer" style="position: relative; width: 700px; height: 700px;"></div>
<asp:TextBox ID="txtPageNumber" runat="server" Text="1" onchange="showPDF(this.value);" />
The Javascript code:
function showPDF(pageNumber) {
var divPdfViewer = document.getElementById('divPdfViewer');
var ifrm = document.createElement("IFRAME");
ifrm.id = 'iframePdfViewer';
ifrm.style.position = 'absolute';
ifrm.style.width = '100%';
ifrm.style.height = '100%';
var oldPdfViewer = divPdfViewer.firstChild;
if (oldPdfViewer) {
ifrm.onload = function () { divPdfViewer.removeChild(oldPdfViewer); };
// Replace the line above by the line below if support for IE is required
// setTimeout(function () { divPdfViewer.removeChild(oldPdfViewer); }, 100);
divPdfViewer.insertBefore(ifrm, oldPdfViewer);
}
else {
divPdfViewer.appendChild(ifrm);
}
ifrm.setAttribute("src", 'MyFolder/MyDoc.pdf#page=' + pageNumber);
}

Hide iframe if src is http:// without link

I need to hide the iframe if the
src is "http://".
What I tried to do:
<script type="text/javascript">
if ( $('iframe[src][src="http://"]') )
document.getElementById('iframe').style.display='none';
else
document.getElementById('iframe').style.display='block';
</script>
and html
<iframe id="iframe" src="url" ></iframe>

You have to change your jQuery selector to iframe[src="http://"] or a better solution is to use CSS to hide your iframe.
When you are working with style related things you should always use CSS instead of javascript.
iframe[src="http://"] {
display: none;
}
<iframe src="http://"></iframe>
<iframe src=""></iframe>

If you want to hide iframes with only src="http://", you can do this with jQuery and some regex.
Note: In Chrome, the src of "http://" is reported as "http:". In Safari and Chrome on iOS it is reported as "http:/". To account for this difference a simple regex can be used.
$('iframe').each(function() {
var src = this.src.toLowerCase();
if (/^http:[\/]{0,2}$/i.test(src)) {
$(this).hide();
} else {
$(this).show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
1. http://<br><iframe id="iframe" src="http://"></iframe><br>
2. http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png<br><iframe id="iframe" src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png"></iframe><br>
If you additionally want to hide iframes with src="" or no src set, or src="https://", you can use the code below. The conditional src === self.location.href tests for src="". The regex /^https?:[\/]{0,2}\w/i tests for "http(s)://" plus one word character. If not found, the iframe is hidden. Non-http(s) src'd iframes are hidden too.
$('iframe').each(function() {
var src = this.src.toLowerCase();
if (src === self.location.href || !/^https?:[\/]{0,2}\w/i.test(src)) {
$(this).hide();
} else {
$(this).show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
1. http://<br><iframe id="iframe" src="http://"></iframe><br>
2. https://<br><iframe id="iframe" src="https://"></iframe><br>
3. http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png<br><iframe id="iframe" src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png"></iframe><br>
4. ""<br><iframe id="iframe" src=""></iframe><br>
5. (blank)<br><iframe id="iframe"></iframe><br>
6. "a.htm"<br><iframe id="iframe" src="a.htm"></iframe><br>
7. src<br><iframe id="iframe" src></iframe><br>

Try this:
<script>
function checkFrame(){
if($('iframe[src][src="http://"]'))
document.getElementById('iframe').style.display='none';
else
document.getElementById('iframe').style.display='block';
}
</script>
and call the function whenever you need to check it. Perhaps the onLoad parameter on the body tag?
But I must ask, why "else" display it, it by default would be displayed.
Also, what if the value is null?
Well, hope that helps!

You could attach an onload handler to your iframe:
var iframe = document.getElementById('iframe');
iframe.onload = function() {
if(iframe.src == 'http://') {
iframe.style.display = 'none';
} else {
iframe.style.display = '';//default
}
}

I am trying to create an iframe that changes when a button is clicked

I am setting up a website and what I need is for when a button is clicked it changes the link in the iframe so it goes to another website. Here is what I got so far:
<script>
var id = 'http://www.aWebsite.com';
function link(){
id = 'http://www.aSecondWebsite.com'
}
</script>
<script>
document.writeln('<iframe name="heel"src="' + id + '" height="300" width="700"> </iframe>');
</script>
<button onclick="link()">Click Me</button>
I am not sure why when the button is clicked the id variable isn't changed?

Actually the value of id is changed, but document.writeln() is not in the link function, hence it's not executed.
A quick-fix would be to move the document.writeln() into link(), but that would be a disastrous fix. document.write(ln)() wipes out everything in the document, and creates a new one, when used after the page has been parsed. You need to do something like this:
function link() {
id = 'http://www.example.org';
document.getElementById('heel').src = id;
}
Then add your iframe element to a HTML, and remove the whole script with document.writeln().
<iframe id="heel" name="heel" src="http://www.example.com" height="300" width="700"></iframe>
EDIT
If you want to create a new iframe element, you can do it like this:
function link() {
var frame = document.createElement('iframe'); // creates an iframe element
id = 'http://www.example.org';
frame.width = '700px'; // sets the width for the new iframe
frame.height = '300px'; // sets the height for the new iframe
frame.name = 'heel2'; // sets the name for the new iframe
frame.src = id; // sets the src for the new iframe
document.body.appendChild(frame); // appends the new iframe to body as a last element
}

Show DIV only when iframe page is loaded

I have an iframe page within a DIV and I only want the DIV to display once the iframe page is loaded/available. If the iframe page does not load/not available, do not show that DIV at all.
I wrote some JS however it doesn't work as I expected it to, the DIV still display regardless if the iframe page is available or not.
Code:
<div class="ad-container" style="display:none">
<iframe src="//oonagi.org" border="0" scrolling="no" allowtransparency="true" width="500" height="300"></iframe>
</div>
var adContainer = $('.ad-container');
// check if ad container exist
if(adContainer.length > 0) {
// only show ad once iframe page is loaded
adContainer.find('iframe').load(function() {
adContainer.css('display', 'block');
});
}

you should change iframe src at document.ready inorder to make it fire your iframe load's event.you can try this:
$(document).ready(function() {
$('#frame').bind('load', function() { //binds the event
$('#ad-container').show();
});
var newSrc = $('#frame').attr('src') + '?c=' + Math.random(); //force new URL
$('#frame').attr('src', newSrc); //changing the src triggers the load event
});

JavaScript Event Handler in ASP.NET

I have the following iframe control (intended to be a facebook like button):
<iframe id="likeButton"
src="http://www.facebook.com/plugins/like.php?href="
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden;
width:450px; height:80px;"
onprerender="setupLink()"
</iframe>
I have the javascript function defined above this as follows:
<script type="text/javascript">
function setupLink()
{
var iframe = $("#likeButton");
var newSrc = iframe.attr("src");
newSrc += encodeURIComponent(location.href) + lblKey.Text;
iframe.attr("src", newSrc);
};
</script>
lblKey is a label on the ASP.NET page that references the specific section of the page. However, as far as I can determine, this function doesn’t get called (if I put an alert() at the start it brings nothing up). I’m new to javascript, but looking around at some articles on the web would indicate that this should update the src property on the iframe.
EDIT:
I have also tried the following:
<script type="text/javascript" >
$(function() {
var iframe = $("#likeButton");
var newSrc = iframe.attr("src");
newSrc += encodeURIComponent(location.href) + '<%= lblKey.Text %>';
iframe.attr("src", newSrc);
});
</script>
Which doesn't work, but neither does:
<script type="text/javascript" >
$(function() {
alert('Hello');
});
</script>

asp.net events (like prerender) don't apply anywhere else (like javascript)
assuming you are using jquery, I would wrap that in a $(), which is a shorthand for "Execute the following as soon as the page has loaded enough to start manipulating it". Also, asp.net controls have a different api then dom elements, so if you want to use that api you need to wrap it in a scriptlet tag
<script type="text/javascript">
$(function ()
{
var iframe = $("#likeButton");
var newSrc = iframe.attr("src");
newSrc += encodeURIComponent(location.href) + "<%= lblKey.Text %>";
iframe.attr("src", newSrc);
});
</script>

Have you considered using the onload event and passing a reference to the iframe?
<script type="text/javascript">
function change_source(iframe)
{
if (iframe.src.indexOf('facebook') < 0)
{
iframe.src = 'http://www.facebook.com/plugins/like.php?href=<%= lblKey.Text %>';
}
}
</script>
HTML something like this...
<iframe id="likeButton"
src="about:blank"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden;
width:450px; height:80px;"
onload="change_source(this);"
</iframe>