Community,
I would like to run a script when you click a link, but this shouldn't open in a new frame, that's why I added the following:
<iframe style="display:none;" name="target"></iframe>
<a href="script.php" target="target">
The script now executes without popping a blank page, joy. But I want the same link to open a PDF file.
<a href="pdf/cesar.pdf" target="_blank" > click here to download </a>
But now the PDF doesn't show, as the target frame is hidden. I can't seem to combine these two. Can someone help me out on this?
Cheers!
Cesar.
It sounds like you might be over-engineering this. Consider the high-level requirements:
The link needs to:
Execute PHP code
Open a PDF file
This sounds like two actions, but from the perspective of the client it's really only one action... open the PDF file. The rest is up to server-side code.
So create one link to perform that one action:
click here to download
As long as getPDF.php returns a PDF file, the client will never know the difference. What that PHP code does before returning that file is up to you. You can have all the code you want in that file, as long as the resulting response is returning the PDF file back to the client.
With the display none it will never show up, you probably should use jQuery, I'd added an ID to the "a"
<iframe style="display:none;" name="target"></iframe>
<a href="script.php" id="openPdf" target="target">
and when click:
$(document).on("click","#openPDF",function(){
$("iframe").css("display","block");
});
Related
I have an application form I need to work into an iframe, but I'm having a hard time with the links for it. Because the iframe was initially giving me errors, I started a work around by having a workaround.php file made that would be read as:
<!DOCTYPE html><html><?php echo file_get_contents($_REQUEST['url']); ?></html>`
Then in the iframe on my page I wrote:
<style><!--iframe.Application {
overflow: hidden;
}
--></style>
<iframe width="100%" height="800px" style="height: 100vh;" class="Application" scrolling="no" src="https://www.mywebsite/workaround.php?url=https://theotherwebsite.com"></iframe>
This worked out very well and I now had the form loading seamlessly onto my website. The next issue was that the links are not working. Any root-relative link within the iframe form was linking to "https://mywebsite.com/page2" rather than to "https://theotherwebsite.com/page2".
Now the manager of the website with the form would be able to change these relative links to absolute links, so this isn't a huge obstacle. To test if it would work, I edited the links in my browser to be an absolute to:
<a href="https://theotherwebsite.com/page2">
For this the iframe refused to connect. I'll need to continue to use workaround.php. Next I tried:
<a href="https://www.mywebsite/workaround.php?url=https://theotherwebsite.com/page2">
For a moment, I see the 2nd page load within the iframe, but then the page opens outside of the iframe in the same tab & window. Additionally, the page that loads is "https://www.mywebsite/workaround.php?url=https://theotherwebsite.com/page2"
At this point, I'm unsure of what link would function and stay within the iframe. I tried to add the "_parent" target.
<a href="https://www.mywebsite/workaround.php?url=https://theotherwebsite.com/page2" target="_parent">
but this changed nothing from my previous attempt. I tried likewise with _self and _top to find no change. _blank still functioned to open the page in a second tab.
At this point I'm not familiar enough with iframes to know what else to attempt. I hope my explanation of past attempts and results is easily understood. If any of you have a suggestion of what could be a solution please let me know!
TLDR: How do I open a link within an iframe of a php document without it opening a new tab?
I need to read a text file on a server and display its content in a blog post on Blogger. The text file is a result of a simple download counter and contains a number. The problem is the Blogger does not support PHP codes in a post. My current solution is to use OBJECT tag to call PHP script that displays the text file content with ECHO. It works. But the result is displayed inside a small frame and I can't apply CSS style to it or align it properly with the existing text. Is there another way? I understand it can be done with AJAX call but my scripting knowledge is basic and I wouldn't know where to begin. Help would be appreciated.
To display the result in the blog I used this code:
<p>File test.zip downloaded
<object type="text/plain"
data="http://example.com/statistics.php?dname=test"
width="30" height="30"></object> times</p>
EDIT: I have tried to follow #Toni suggestion but it only leads to more questions. Looks like Ajax call is way beyond my current level of knowledge. Sorry and thank you again.
Here is what I'm currently trying. I have moved the text that goes with the counter inside PHP file so the script now returns a string like "file has been downloaded 8 times" instead of just number "8". Also instead of OBJECT tag I'm using IFRAME.
<iframe src="http://example.com/mystats.php?dname=test"
frameborder="0" border="0" cells pacing="0" height="30"></iframe>
The iframe seems to be easier to style. If I can't figure out how to find which CSS is applied to a blog post and how to apply it to iframe, I can at the minimum mimic the style by using similar font.
You can use javascript with your blogger web-site.
Using javascript on your web-page, you can invoke a GET request to your PHP code and get the data you want, to display it on your web-page.
Below, there are links, to help you with this task:
How to invoke GET request in vanilla JavaScript
Invoking GET with jQuery
Use JavaScript to alter text dynamically
I made it work with JavaScript! Here is how. Server side PHP script reads and echoes a text file inside document.write().
<?php
$varcontent = #file_get_contents('yourtextfile.txt');
echo 'document.write("'.$varcontent.'")';
?>
The resulting string looks like this:
document.write("your text file content here")
Inside the Blogger post add the JavaScript code with the PHP script file as a source:
<script type="text/javascript"
src="http://example.com/yourfile.php">
</script>
Done! The content of your text file is displayed and styled with your current CSS.
Is there any way i can load PDF file (its contents) in a div or iFrame?
I have a bunch of PDF files on a server and, ideally, i need to have a button 'Show file' on a page, clicking on which will load the contents of selected file in a div(iFrame).
You can also use google pdf view by using iframe on your page :
<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
Instead of this in above code :
http://infolab.stanford.edu/pub/papers/google.pdf
Use your own PDF file path.
You can view the demo here.
http://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html
It's just a suggestion. No downvotes please.
Google's gview is sometimes unresponsive and given 204 status. Here is the best free alternative.
https://stackoverflow.com/a/66548544/2078462
We're trying to create a trackback system where an outside web publisher can put some html on a page on their website that links back to a specific product page on our site. Let's call it a 'badge' for purposes of this question.
Once they've inserted the badge, we want to identify this, then grab the < h1 > and first < p > as a teaser to comprise a link from our site back to theirs and write all this stuff to our database. Then, our users can see the title and first bit of their page, then decide if they want to see more.
Here's what we've done (not much I'm afraid):
<a href="http://www.mysite.com/abc.html">
<img alt="abc" src="http://www.mysite.com/logo.gif" style="width:200px;height:100px" />
</a>
We're planning to build an admin page to do the last part of grabbing the < h1> and < p> and posting it to the live database, etc. and we'll figure this out later.
However, the middle step (identifying that this piece of html has been used) we're at a loss.
Is this something we should be doing through a log file....I have no clue even how to begin thinking about it.
A little direction of where to begin working on this problem would be very helpful.
Thanks in advance!!
This is one approach.
You give them HTML which looks something like:
<a href="http://www.mysite.com/abc.html">
<img alt="abc" src="http://www.mysite.com/logo.php" style="width:200px;height:100px" />
</a>
Notice that says logo.php, not logo.gif.
logo.php will live on your server. Its purpose is twofold:
Gather information about the page holding the <img> tag
Load and output logo.gif so the users see the image as expected.
If you embed that html on a webpage somewhere, logo.php will have information about where the request for the image originated. Specifically, $_SERVER['HTTP_REFERER'] will give you the complete URL to the page where the img tag resides. It is then up to you to decide how to process and store that information.
I don't know exactly what you want to do, but a very simplified logo.php would look something like this:
<?php
$url = $_SERVER['HTTP_REFERER'];
// do something with $url...
// it will be something like "http://theirsite.com/wherever/they/pasted/the.html"
// now output the logo image...
header("Content-Type: image/gif");
echo file_get_contents("/path/to/logo.gif");
Keep in mind that every time anyone hits their page with the image tag, logo.php will be run. So don't accidentally create 10000 links back to their site on your site :)
Basically I have a slightly non-standard implementation of FancyBox. By default you have to include a link to the large version of the image so that the Lightbox can display it. However, in my implementation, the image link URLs point to a script rather than directly to the image file. So for example, instead of:
<a href="mysite/images/myimage.jpg" rel="gallery">
I have:
<a href="mysite/photos/view/abc123" rel="gallery">
The above URL points to a function:
public function actionPhotos($view)
{
$photo=Photo::model()->find('name=:name', array(':name'=>$view));
if(!empty($photo))
{
$this->renderPartial('_photo', array('photo'=>$photo, true));
}
}
The "$this->renderPartial()" bit simply calls a layout file which includes a standard HTML tag to output.
Now when the user clicks on a thumbnail, the above function is called and the large image is displayed in the Lightbox.
Now if the user right clicks on the thumbnail and selects "open in new tab/window" then the image is displayed in the browser as per normal, i.e. just the image. I want to change this so that it displays the image within a layout.
In the above code I can include the following and put it in an IF statement:
$this->render('photos', array('photo'=>$photo));
This will call the layout file "photos" which contains the layout to display the image in.
I have a specific limitation for this - the image URL must remain the same, i.e. no additional GET variables in the URL. However if we can pass in a GET variable in the background then that is OK.
I will most likely need to change my function above so that it calls a different file for this functionality.
EDIT: To demonstrate exactly what I am trying to do, check out the following:
http://www.starnow.co.uk/KimberleyMarren
Go to the photos tab and hover over a thumbnail - note the URL. Click the thumbnail and it will open up in the Lightbox. Next right click on that same thumbnail and select "open in new tab/new window". You will notice that the image is now displayed in a layout. So that same URL is used for displaying the image in the Lightbox and on its own page.
The way StarNow have done this is using some crazy long JavaScript functionality, which I'm not too keen on replicating.
The html link should point to the layout showing the image on a new page by default, e.g.:
<a href="mysite/images/show/123" rel="gallery">
Before the lightbox opens, append a query string to the url in order to distinguish it from the normal link and load the layout for the lightbox. As soon as the image is loaded in the lightbox, change the link back to its original state.
$("a[rel=gallery]").fancybox({
'onStart': function (selectedArray, selectedIndex, selectedOpts) {
var el = $(selectedArray[selectedIndex]);
el.attr('href', el.attr('href') + '?mode=lightbox');
},
'onComplete': function (currentArray, currentIndex, currentOpts) {
var el = $(currentArray[currentIndex]);
el.attr('href', el.attr('href').split("?")[0]);
}
});
You will then have to process the following link in order to return the lightbox layout:
<a href="mysite/images/show/123?mode=lightbox" rel="gallery">
You should be able to modify the JavaScript function that generates the HTML with the <img /> tag to link the image to such a page. Although, if you are trying to make it so that selecting "Open image in new tab" opens a page like this, then that might be impossible (unless there is some sort of crazy cookie/session implementation to alternate between the image script just passing an image and generating a page, which I think could be possible). To assign a new href for the link to have when you click "Open link in new tab" should be quite possible by just modifying the JavaScript function.
Could you clarify what exactly you are attempting to do? Open link in new tab or open image in new tab?
Edit: It appears that the FancyBox script is changing the href of your link to point directly to the image. You would need to find where in the script it is selecting each link tag with rel="gallery" and replacing the href to point to the images; you will want it to not change the href if you want it left as "mysite/photos/view/abc123", for example.
If you need the same functionality the demo site you posted is using, then this is easy to achieve, but keep in mind that the site is NOT using the same URL for both the pop-up and the standalone image page.
Click on any thumbnail with Firebug console is open, you'll notice that it's making an Ajax request to get the image from a different URL! which is an obvious behavior.
http://www.starnow.co.uk/profile/PhotosTrackView.aspx?photo_id=2129864
While the link is pointing to:
http://www.starnow.co.uk/KimberleyMarren/photos/2129864/
you see your links should point to the correct image page, in case of JS disabled browsing or right clicking (as you mentioned) AND using JS to override the link default behavior (which is redirecting you to the image page).
So for example you can have a method that will generate your image layout/page, and this should be used as href; and override the click event of the link to call a similar method (using ajax) but this time it'll retrieve the image itself to use it in your lightbox.