Links with target=_blank opens in browser - progressive-web-apps

In my PWA website, I have in a few places, links that open in new tab using target="_blank". I want to maintain this functionality but not if the user has installed the PWA.
Currently, if the user installs the PWA and click on that link, the user is taken to the browser and the page loads there.
I have tried all different kinds of scope but all give same result.
/
./
https://beta.domain.com/

// Add this script after </body>
<script>
if (window.matchMedia('(display-mode: standalone)').matches) {
// if webapp installed, remove 'target' attribute of links
document.querySelectorAll('a[target=_blank]').forEach(function(a) {
a.removeAttribute('target');
});
}
</script>

Related

Set PWA start_url in web app manifest based on the URL that was added to homescreen

I would like to make the start_url in the manifest at the where user visit the landing page.
https://example.com/1234
https://example.com/4321
this is my php to fetch whole url {{ Request::fullUrl() }}
I put at "start_url" : "{{ Request::fullUrl() }}", it doesn't fetch in json file.
I had try change the manifest.json to manifest.php, but don't know how to convert the json content into php to make it work.
<link rel="manifest" href="/_manifest.php?start_url=val" data-pwa-version="set_in_manifest_and_pwa_js">
I know this is old question and I search all over the internet still can't find the solution.
Set start_url in web app manifest based on the URL that was added to homescreen
this doesn't have a solution. delete the start_url doesn't make the PWA work.
Any expert could help me? Appreciate!
I'm newbie on coding, please forgive my limited knowledge.
Chrome (and most other browsers) require you provide the start_url in the manifest, and it can't be dynamic.
You could build this behaviour by saving the page the user was on when the PWA was installed. Then, set the start_url to a simple redirect page that checks to see what page the user was on when they installed, and redirect them to that page.
To save the page the user is on when the PWA is installed, listen for the appinstalled event, then save the page to localStorage:
window.addEventListener('appinstalled', () => {
localStorage['installedFrom'] = window.location.pathname;
});
Then, in the redirect page, do something like:
const installedFrom = localStorage['installedFrom'];
if (installedFrom) {
window.location.replace(installedFrom);
} else {
// No install page saved, send them to the home page?
}

How to block a code in specific file in developer tools?

When loading the index.html page in the index file there is javascript code. How can I block this particular code when the page index.html is loading?
the code that I want to block is
<script>
(function () {
setTimeout(function(){
dataLayer.push({
'a': '13'
});
}, 100);
})();
</script>
Using developer tools(three-dot menu > More Tools > Developer Tools), you can delete lines in the website for the ongoing session. This would effectively prevent the script from running. If you want to see all the scripts on the sites you visit, use the Firefox browser coupled with the NoScript add-on. This will show you all the scripts on the site, and allow you to give various permissions to each of them. If you own the index.html file and have it on your local computer, then simply comment out or delete the script that you don't want.

Inserting facebook share button on personal website

I want to put a button on my website that will open a popup for the user to share the url on its profile.
I followed the steps shown here, after click on 'get code':
1. Include the Javascript SDK on your page once, ideally right after the opening <body> tag.
2. Place the code for your plugin wherever you want the plugin to appear on your page.
but I get a blank div without the button. What's missing? Do I need to register on facebook developers? Do I need to include some javascript src in the <head>?
On twitter is very simple, you just need to get the code from here
Edit: I want something like youtube facebook share.
As noted in the comments, somehow the default method as suggested by Facebook is not working, or rather the way the share button documentation suggests is not clear enough. This answer as suggested appears to work. Note that you will need a Facebook App ID.
Alternatively, this answer allows for a simple link, which you then have to style yourself with CSS, this alternative has the benefit of making share buttons that are consistent in design with your website, if you just want the vanilla blue Facebook button then continue with this answer.
Squarespace also details the default way of adding a facebook like button, my attempts to get it to work in a jsFiddle were not successful.
Get an AppID and embed the Facebook script in your website.
This step is explained in detail in the official documentation, where you just generate your own AppID then copy paste the script code (usually after the <body> tag.
Add a jQuery library for the next bit of code as explained in this answer.
The share dialog box script:
-
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'Your-blog-link',
picture: ‘http://yourpicture-here’,
caption: 'yourCaption',
description: short-description-here
message: ''
});
});
});
</script>
More parameters can also be added to customize the button.
Lastly, add the image/element you want to be the share-button:
Something like: <img src = "share_button.png" id = "share_button">

Website Redirection Fix?

I run an anime website with embeded links for players, multiple per page/per episode so I have quite a few, and on some of the pages, the players are redirecting the user to adultfriendfinder, which is very annoying because it doesn't redirect them through a popup or a new tab, it redirects my site to their page, and this happens even with adblock.
here is a link to my website, and a page that will display this:
http://animewolf.tv/anime/death-note-episode-1-dubbed/
if you click on 'mp4upload' it will redirect to adultfriendfinder.com, you'll need to press back and play the video, which is very annoying.
If it doesn't redirect you and you want to see, just look around the site's episodes ( http://animewolf.tv/watch-anime/ )
Is there anything I can do to get around this? any plugin, anything I can do to block the site? anything?
thx.
if you see from the firebug, i find network error (404) in http://www.myanimelinks.com/nanotabs.js which redirect you to google-ads(adsense). It is known that if no proper ads exists based on your site will force google to redirect the ads to other ads or blank (and google dislike ads inside a frame.
Besides, links to access http://www.myanimelinks.com/nanotabs.js is denied, blocked or redirect to 404 page.
if you access this following link> without frame, everything is going well:
http://animewolf.tv/wp-content/plugins/anime/embed/auengine.php?id=e5XVDRmg
In this case, you should remove other links available which causes error.
UPDATE:1
this links > http://animewolf.tv/wp-content/plugins/anime/video_source.php?source=YToxOntpOjA7YTozOntzOjI6ImlkIjtzOjEyOiI2aGMzY2w1b3NjZzkiO3M6NDoidHlwZSI7czoxOiI5IjtzOjY6Im51bWJlciI7czoxOiI3Ijt9fQ== go to encrypted page content then you add it to your page within frame. this causes this.
now try to add this link > http://animewolf.tv/wp-content/plugins/anime/embed/auengine.php?id=e5XVDRmg directly to the src="" of your frame. perhaps, it can work.
UPDATE:2
Try this and place on your page which globally relate to them:
<script>
$(document.body).ready(function(){
$(document).on('click', 'a', function(e){
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
});
</script>
otherwise, see this:
http://stackoverflow.com/questions/15811079/stop-redirecting-in-javascript

Pass a parameter to Facebook Page Tab app

I have this HTML on this URL: https://myapp.herokuapp.com
<html>
<body>
<iframe frameborder=0 border=0 scrolling="no" src="<?php echo $_GET['url']; ?>" width="760px" height="521px"></iframe>
</body>
</html>
I have created a Facebook Page Tab and I want that anyone can install it on their Facebook Page with a different URL. So when you click on the tab on FB Page 1 it would display embedded URL1, FB Page 2 would display URL2, and so on. The URL is, then, a parameter when you install the Page Tab.
I have tried this:
https://www.facebook.com/dialog/pagetab?app_id=XXXXXXXXXX&next=https://myapp.herokuapp.com?url=HERE_YOUR_URL
It is installing the app, but seems that the URL parameter in the iframe is null. What am I doing wrong?
Thanks
My approach is a little different.
While it may not be possible to install Apps with URL parameters, you could adjust their content depending on which Page loaded them in the first place. As the Page Tab Facebook API Integration Tutorial states:
When a user selects your Page Tab, you will receive the signed_request
parameter with one additional parameter, page. This parameter contains
a JSON object with an id (the page id of the current page) (SOURCE)
So you would install the same App on several pages, and use the following code at the top (after you've created the $facebook object):
$page_id = "";
$sr = $facebook->getSignedRequest();
if($page = $sr['page']) {
$page_id = $page['id'];
}
You should now be able to use $page_id as the unique identifier telling you which page the user is currently viewing the application from, instead of a $_GET variable. Switch statements or a database integration are the first methods that come to mind, but you seem to be asking how to identify and retrieve a unique parameter and not how to use it, so I'm sure you will figure this out on your own. :)
Note: This (obviously) will not work on an app being installed on several Page Tabs of the same page, but that doesn't seem to be a concern of yours.
From my understanding it's not possible to have on app installed in separate Page tabs. You'll need to create different apps for that, but you can use use the same "base app" location and augment the location with your desired parameters.
For example:
You create two apps with "Page Tab" as platform.
For the first app, specify a Page Tab URL https://myapp.herokuapp.com/index.php?test=1
For the first app, specify a Page Tab URL https://myapp.herokuapp.com/index.php?test=2
Create an index.php in your apps base folder:
<? echo $_GET["test"]; ?>
Add both Page Tab apps to a Page (or separate Pages). See: https://developers.facebook.com/docs/graph-api/reference/v2.0/page/tabs/#publish or https://developers.facebook.com/docs/reference/dialogs/add_to_page/
Open first Page Tab, then second, and see that diffent parameter results are shown