I have a webpage with some frames within each other in it. Last frame loads a website with many URLs. Some URLs have target="_top" and some have target="_blank". When I click to URL with target="_top" it breaks all frames on my parent page and load this URL, but when I click URL with target="_blank" it leaves my parent page as is (with frames) and opens this URL in a new window. Now the question: how to do that when URL with target="_blank" clicked, beside the opening URL in a new window it breaks all frames in my parent page and close it? Thanks
<a href="your/url" target="_blank" onclick="window.location.href = this.href;">
Does that work? I'm not sure I'm entirely understanding the situation. Or do you want to "close" the parent page, e.g.
<a href="your/url" target="_blank" onclick="window.close();">
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 am currently working on home.php where I have the following anchor link echo'd:
<a href='#?id=$thought_id' class='toggle-comment' data-id='$thought_id' style='padding-left: 5px;'> Comments ($num_of_comments) </a>
Now, when I hover over the Comments anchor, I get the id of the thought fine. It's just that when I hover over the link, or when I click the link, the url reads:
http://localhost/home.php#?id=210
So, 210 is the ID of the thought the comments anchor is assigned to, which works. But I do not understand why the file name is appending to the anchor link when it hasn't been defined to do so.
Even when I put <a href='#'> The URL still reads http://localhost/home.php#
Your browser is going to show you the full, canonical URL (including the anchor) when you hover over a link. It's the same link that will be copied to your clipboard if you right-click it and choose "Copy Link Location".
As of my requirement, I have placed an anchor tag in an IFRAME. When I click on anchor link, the page redirects the page in the IFRAME. Here, my requirement is when user clicks on anchor tag, (Which is in IFRAME) the page redirects to the main url (Not in the IFRAME). How can I do this in PHP or in JavaScript. Can you please say some thing?
try <iframe> <a href="#" onclick='window.location.href="homepage.php"' >click here </a> </iframe>??.. this ones javasript..
You're looking for the <a target= attribute. Setting it to _top will change the url of the outermost frame, and setting it to _parent will change the url of the parent frame.
Well, my website can not redirect to
https://www.facebook.com/QuaFootSpa
from
http://quafootspa.com/
I have tried redirection to facebook page through
a tag href attribute and also javascript function. but it redirects to middle page. kindly browse http://quafootspa.com/ and click on facebook icon on the top so it will redirect to middle page that says Go To Facebook.com
Clicking on the (Go to Facebook.com) will direct to https://www.facebook.com/QuaFootSpa
Try target='_top' in the href.
So it becomes
<a target='_top' href="https://www.facebook.com/QuaFootSpa/">
Right now the link is being opened in the lower frame and FB doesnt like it.
Try <a href='http://www.facebook.com/QuaFootSpa/' target='_blank'>Facebook Page</a>
your putted https:// instead of http://
Tested and works.
You are using frame and in frame self works in the frame so use target="_top"
<img src="images/qspa/fb_btn.png">
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.