Using link for open another page outside of project
<div class="info-line">
<mat-icon class="s-20 ml-2">
language
</mat-icon>
<a class="h3" href="https://www.google.kz/">
Web Page
</a>
</div>
but when click to link, opened this page: http://localhost:4200/google.kz - local page, not "google.kz"
How to make, open google.kz outsite link, not trying to find in local page?
You can use target="blank" as follows.
<a class="h3" href="https://www.google.kz/" target="_blank">
target
Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
_blank: usually a new tab, but users can configure browsers to open a new window instead.
It should work the way you've described it, but another way of doing it is using the document.location api.
Example:
<div class="info-line">
<mat-icon class="s-20 ml-2">
language
</mat-icon>
<a class="h3" (click)="navigate()">
Web Page
</a>
</div>
inside your component:
navigate(){
document.location = "https://www.google.kz/"
}
Related
I'm learning HTML.
I've following code piece:
<a href="#B" id="specialClass" class="primary-btn icon-cart" data-one="#A" data-five="google.com" data-ten="#C" target="_blank">
<span id="pressButton">New Button</span>
</a>
When I press button based on slider and data-five gets triggered, I for some reason open in a new tab mywebsite.com/google.com instead of google.com.
What am I doing wrong?
If it is an address outside your web page you have to put the full path with https://google.es
<a target="_blank" href="https://google.es">Google</a>
I have a list of users displayed in the table and each users has link which is displayed and can be navigated to.
<div class="inline-icon-text">
<small class="text-muted d-md-none mr-3">Link</small>
<a [attr.href]="candidate.url" target="_blank" [title]="candidate.url">
<i class="material-icons">open_in_new</i>
</a>
</div>
Problem is, when I inspect link element it points to correct address but after clicking on it gets appended to app base url.
<a _ngcontent-c15="" target="_blank" href="www.test.sk" title="www.test.sk">...</a>
And after click it gets opened in the new tab with address localhost:4200/www.test.sk
What do I miss?
Always prepend your absolute external links with protocol or // shortcut for http:// OR https:// depending on your app's protocol.
<div class="inline-icon-text">
<small class="text-muted d-md-none mr-3">Link</small>
<a [attr.href]="'//' + candidate.url" target="_blank" [title]="candidate.url">
<i class="material-icons">open_in_new</i>
</a>
</div>
Browsers treat URLs as relative by default to facilitate in-app navigation.
As a side note, this behavior is not Angular-specific; other frameworks and plain sites behave exactly the same
I want my cookies details to open in a new window popup in my Chrome browser when i click on it.
This is my code-
</div>
<a href="javascript:window.open('','_self').close();">
<label className="return"><T.span text='Cookies.Homepage' /></label>
</a>
</div>
<Link to="/Cookies" target="_blank">
<T.span text='Footer.Cookies'/>
</Link>
But this always opens the cookies content in a new tab. How can i open it in a separate new window popup??
To open the new window in an actual window, and not a tab, you need to pass in a specs parameter to window.open:
javascript:window.open('','_blank','height=600,width=400');
Use blank instead of self
<a href="javascript:window.open('','_blank').close();">
I am using angular material on angularjs v1.
I am having problems with a simple menu bar using angular material. Here is the html code for the menu bar;
<md-toolbar layout="row" class="md-whiteframe-z3" style="padding: 0px;margin:0px;float: left;">
<h2>Test page</h2>
<md-button href="Data1.html">Data1</md-button>
<md-button href="Data2.html">Data2</md-button>
</md-toolbar>
When I click on Data1 button, the browser URL changes to "http://127.0.0.1/test-site/webroot/app/Data1.html" but the browser does not go to that webpage. I have to manually refresh the page to force the browser to go to that webpage.
How can I get the browser to go to that page when the button is pressed?
EDIT: The existing answer works but it opens a new tab. I would like the browser to go to the new webpage on the existing tab. Preferably, it would be nice if the solution can be purely in html but using javascript would be fine. I have created a bounty.
Use ng-href like this
<div>
<md-button ng-href="{{googleUrl}}" target="_blank">Go to Google</md-button>
</div>
DEMO
UPDATE:
You can achieve it by mentioning target="_self"
<md-button ng-href="{{googleUrl}}" target="_self">Go to Google</md-button>
DEMO
Try to change window.location.
HTML
<md-button ng-click="changePage('Data1.html')">Data1</md-button>
<md-button ng-click="changePage('Data2.html')">Data2</md-button>
JS
$scope.changePage= function(page){
window.location.assign(window.location.origin + '/test-site/webroot/app/' + page);
}
I can't test it, so I'm not sure that there are no bugs : ) But something similar should be what you need. Let me know how it works!
Angular has $location and ng-href to help you do that -:
For example when using ng-href you can do the following
1. (link, don't reload)
<a id="link-1" href ng-click="value = 1">link 1</a>
2. (link, don't reload)
<a id="link-2" href="" ng-click="value = 2">link 2</a>
3. (link, reload!)
<a id="link-3" ng-href="/{{'123'}}">link 3</a>
4. (link, don't reload)
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a>
5. (no link)
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a>
6. (link, change location)
<a id="link-6" ng-href="{{value}}">link</a>
The $location service parses the URL in the browser address bar (based on window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into the $location service and changes to $location are reflected into the browser address bar.
So any time your application needs to react to a change in the current URL or if you want to change the current URL in the browser. **
BUT
It does not cause a full page reload when the browser URL is changed. To reload the page after changing the URL, use the lower-level API, $window.location.href.
READ MORE FROM
https://docs.angularjs.org/guide/$location
https://docs.angularjs.org/api/ng/directive/ngHref
I'm trying to parse a html code for specific content, but the problem I'm running into is that certain websites require you to click a "Show more" button.
When I grab the URL there's no way to tell it I want the full code with the "Show more" button clicked. Is there a way to grab the full source code of the page, because it keeps getting cut off after a point.
Example website: https://play.google.com/store/search?q=fm%20radio&c=apps&hl=en
The source code gets cut off at the "Radio hungary" app, which is the last app that loads automatically.
This even happens when I load everything and then try to view the pages source code.
It ends in:
style="display:none"> Show More </button> <div class="bottom-loading" style="display:none"></div> <div class="footer"> <div class="footer-links-container"> <span class="copyright"> ©2016 Google</span> <a class="footer-link id-no-nav" href="https://play.google.com/intl/en_us/about/play-terms.html" target="_blank"> Site Terms of Service</a> <a class="footer-link id-no-nav" href="http://www.google.com/intl/en_us/policies/privacy/" target="_blank"> Privacy Policy</a> <a class="footer-link id-no-nav" href="http://developer.android.com/index.html" target="_blank"> Developers</a> <a class="footer-link id-no-nav" href="https://play.google.com/artists" target="_blank"> Artists</a> <a class="footer-link id-no-nav" href="https://support.google.com/googleplay/?p=about_play" target="_blank"> About Google</a> </div> </div> </div></div><div class="loading" jscontroller="EgJAl" jsaction="rcuQ6b:rcuQ6b" id="page-load-indicator"></div><div id="instrument-manager-parent"></div><script src="https://wallet.google.com/inapp/lib/buy.js"></script><script
Even if I click the show more button.
The purpose of this is to grab all the URL's of the images, and I can't do this by hand because well.. we have thousands of images.
I believe if you just take advantage of the Javascript HTML DOM methods you can accomplish what you want to achieve.
This will help: http://www.w3schools.com/js/js_htmldom_methods.asp
By using this, you can target specific elements/ids/classes and pull or modify the information you want.
Jquery will also help you a lot with this.
You can solve it using Javascript dom,steps to do are
keep your content in a div element
set its default height as a fixed value
on clicking the show more link execute a javascript function to make the div element height to auto
in this way you can show content excerpt with javascript
If you go for server side, you can create a new page for showing the content.