Im trying to embed a PDF on to my page, but the PDF just does not load. I have checked the file path which is correct.
When the page first loads, I get a blank grey embed field, however when I click on the embed, I get this (which stays like this):
<script>
var selected_doc_ref = "";
function getPDF() {
//selected_doc_ref = "395";
var DV_pdf_path = "../../../Document_Viewer/Risk_Assessment/RISK ASSESSMENT 1024.pdf";
var pdf = document.getElementById("pdf");
var clone = pdf.cloneNode(true);
clone.setAttribute('src', DV_pdf_path);
pdf.parentNode.replaceChild(clone, pdf)
}
</script>
<body onload="getPDF()">
<embed id="pdf" style="border-radius: 10px;position: relative;top:0;right:0;left:0;bottom:0;width:100%;height:620px;"/>
Any ideas where I am going wrong?
Thanks
As the browser does not refresh the embed tag when you add the src attribute to the <embed> tag after page load you have 2 options:
Set the src attribute on the <embed> tag directly so it is available from the beginning on. You could set the src through code behind or as a static value.
In your javascript, add the whole <embed> tag inside the getPDF() function instead of just the attribute src:
var e = document.createElement('embed');
e.attributes['src'] = src;
e.attributes['style'] = "border-radius: 10px;position: relative;top:0;right:0;left:0;bottom:0;width:100%;height:620px;";
document.getElementById("pdfContainer").appendChild(e);
Assuming that you have a element with id "pdfContainer" where you want to place the <embed> tag inside.
Related
I need to implement
<img src="url" width="1" height="1" style="display:none" />
into at the beginning of it with the help of Google Tag Manager (and you guys).
How to do this?
Javascript does only allow to append to the end of the body - so instead of appending to the body, you have to insert before the first child of the body.
Create a custom HTML tag, and insert
<script>
// create the image
var img = document.createElement("img");
// set properties such as a weird example url and style
img.src = "https://www.kukksi.de/wp-content/uploads/2020/05/19-Disney-13-Goofy-und-Max.jpg";
img.style = "display:none";
// insert before the first child element of the body, which will place the element at the beginning of the body
document.body.insertBefore(img, document.body.firstChild);
</script>
I have to say that is is very hard to imagine a valid use case, though.
can someone point me to the right direction
I need a code to dynamically create a temporary Web Pop-up Page which I'll declare the HTML Content in ASP.NET Using VB
reason for this function is that I am trying to make Application Form printer and I need to print the current page with the
<script>window.print();</script>
You could generate the entire HTML as string and then use as below:
window.open("data:text/html;charset=utf-8,<head></head><body><h3>Test Document</h3></body><script>window.print();</script>");
Basically,
window.open("data:text/html;charset=utf-8," + YOUR_HTML + "<script>window.print();</script>");
Copy paste the below script in a browser to test:
data:text/html;charset=utf-8,<head></head><body><h3>Test Document</h3></body><script>window.print();</script>
== Updates ==
Aspx.vb Code
Dim htmlText As String = "<head></head><body><h3>Test Document</h3></body>".Normalize()
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "tempWindow", "<script>openTempWindow('" + htmlText + "')</script>", False)
Aspx Code
<script type="text/javascript">
function openTempWindow(content) {
var win = window.open("");
win.document.write(content);
}
</script>
You can achieve that by manipulating the response. This is one way to dinamically create an HTML document. For example:
HttpContext.Current.Response.Write("<html>
<body>
<h1>Something to print</h1>
</body>
<script>window.print();</script>
</html>")
In order to make it a popup window, in your base page you can implement window.open() function after, lets say, a button click. For example:
window.open("../pageReturningDynamicHTML.aspx?someParam=someValue")
In the provided link you can find more examples on how to open a window as popup with settings as sizes and more.
This works …
Link text
but this doesn't …
<script type="text/javascript">
window.onload = function() {
var a = document.getElementById("mylink");
a.onclick = function() {
parent.document.getElementById('frameName').src = 'page.html';
}
}
</script>
<a id="mylink" href="page.html">LINK</a>
Any idea why I can't get the element by id from one iFrame to another? Also I know very little code so I apologize in advance if its obvious.
First i would make sure that the security of the site within the IFrame allows you to do this kind of stuff. Check out this link:
Overcoming "Display forbidden by X-Frame-Options"
Next, i would worry about the target of your anchor tag. With specifying it will default to self. In your second piece of code the target will be _self. Thus, when you click the link your javascript will want to change the source of the IFrame while the link will want to change the entire page. I would pick either a JS or HTML implemetation of linking and not both. Here is something that i put together to show one way of changing the iFrame without an actual anchor tag.
<html>
<body>
<iframe id="frameName" src="page.html"></iframe>
<button onclick="changeFrame()">LINK</button>
<script>
function changeFrame() {
document.getElementById('frameName').src ='page2.html';
}
</script>
</body>
</html>
Suppose we have the following HTML file:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test iframe download</title>
<script type="text/javascript">
var init = 0;
function download() {
document.getElementById("dload_frame").src = "http://example.com/dload.py";
}
function alert() {
if (init == 0) {
init = 1;
}
else {
document.getElementById("alert_span").innerHTML = "Got it!";
}
}
</script>
</head>
<body>
<span id="alert_span">Main content.</span><br/>
<input type="button" value="Download" id="btn" onclick="download()" />
<iframe id="dload_frame" src="http://404.com/404" onload="alert()"> </iframe>
</body>
</html>
Now, if the URL to which iframe's src is being rewritten to (in this case - "http://example.com/dload.py") returns HTML, no problem: the onload event fires, the span's contents are replaced, everybody's happy.
However, if the content type of the file returned by the URL is set to something that forces the browser to open the save file dialog, the iframe's onload event never fires.
Is there any workaround? Using iframes isn't necessary, the desired behavior is to launch a callback after the browser begins downloading the supplied file.
I have encountered the same problem as this:
Here is my work-around, please see if it works for you:
<script>
function download(){
var url = 'http://example.com/dload.py';
var htm = '<iframe src="' + url +'" onload="downloadComplete()"></iframe>';
document.getElementById('frameDiv').innerHTML = htm;
}
</script>
<div style="display:none" id="frameDiv">
</div>
<button onclick="download()">download file</button>
As far as I can remembered iframe's onload event fires only once.
Setting another value for src attribute will not cause the onload event to fire again.
I have the same problem, onLoad handler is only fire when the content change. If you download a file. If you delete HTTP header to print file content on iframe, the onload is correctly fire.
My solution after many different approaches to get this working across ff ie safari and chrome was not have a 2 step download.
the original JS request to create an iframe loads a src that would normally have loaded the pdf
However, the src now loads a page with yet another iframe inside of it, which now contains the url of the pdf.
in the html response I trigger the onload and also a catchall setTimeout funciton which calls my response on window.parent.window.handlerfunction which my onload on the top iframe would have been. The result is a PDF download and a trigger on the top level parent of the handler function that works across the browsers since it no longer relies on detecting an actual iframe load but rather relies on supported parent/child window relationships.
hope this helps someone who was also stuck
You can check iframe readyState property repeatedly after short time intervals until it gets completed.
function iframe_onload(iframe_id, js) {
var iframe = document.getElementById(iframe_id);
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDoc.readyState == 'complete') {
eval(js)
return;
}
window.setTimeout('iframe_onload("' + iframe_id + '",`' + js + '`);', 100);
}
You might need help of jquery for this, for instance you can do this:
$.get('http://example.com/dload.py',{},function(result){
$('alert_span').html(result);//or some content
});
Will this run inside an ASCX file in my ASP.Net project?
I can't seem to get it to work, just wondered if there was some particular thing missing? Do i need to include "runat="server""?
<!--[if lte IE 6]>
<script type="text/javascript">
window.onload = function() {
var images = document.getElementById("GetQuote").getAttribute("ImageUrl");
for (var i = 0; i < images.length; i++) {
var image_png_src = images[i].src;
var image_gif_src = image_png_src.replace(".png", ".gif");
images[i].src = image_gif_src;
}
};
</script>
<![endif]-->
It appears that this JavaScript function is attempting to reference ASP.NET web control properties, which are not accessible from the client side. You can, however, reference the HTML entities that are output to the page by ASP.NET, along with their attributes.
Assuming your JavaScript code is code within the .ascx code, change this line:
var images = document.getElementById("GetQuote").getAttribute("ImageUrl");
To this:
var images = document.getElementById('<%=GetQuote.ClientID%>').getAttribute("src");
What this does is insert the client ID that ASP.NET creates for the GetQuote Image control so that it can be referenced from the client side. It also references the proper attribute of the HTML img element (src) that corresponds to the ImageUrl property of the server side Image control.
EDIT:
I noticed after seeing TheVillageIdiot's response (and reading your code a bit more closely, which I should have done initially) that you are trying to use the images variable as an array. It appears that you may be trying to match several image elements that contain the text "GetQuote" in their IDs (like GetQuote1, GetQuote2, etc.).
Assuming that you need to do this on the client side, and that you are not using a framework like jQuery, try this:
window.onload = function()
{
// get all img elements on the page and load them into an array
var images = document.getElementsByTagName("img");
// iterate through the image array
for (var i = 0; i < images.length; i++)
{
// check that the current image's id contains "GetQuote" (case sensitive)
if (images[i].id.indexOf("GetQuote") >= 0)
{
var image_png_src = images[i].src;
var image_gif_src = image_png_src.replace(".png", ".gif");
images[i].src = image_gif_src;
}
}
};
You don't need a runat="server" because this is code that will run on the client. It should work, but maybe you are having problems because you are referencing IDs on items that are asp.net controls? This would mean that your ID values would not match. If so you could solve this by using control.ClientID redndered into the JavaScript server-side to make them match.
If GetQuote is an aspx element then you need to replace it with <%= GetQuote.ClientID %> and ImageUrl with src like
var images = document.getElementById('<%=GetQuote.ClientID%>')
.getAttribute("src");
Also images should be one string not an array of strings so your loop is also at fault. Try this one instead:
var image = document.getElementById('<%=GetQuote.ClientID%>').
if(images){
var src = image.GetAttribute("src");
image.SetAttribute("src",src.replace(".png", ".gif");
}