Link to external Url and open modal window - javascript

I'm trying to link to a contact form on another site but it's contained in a modal window. This is pretty much what I'm trying to do Linking Directly To An Open Modal Window Through a URL? however, the modal i'm trying to open does not have an id, just a class. The class is
.modal-content
Is this a possibility without the modal having an id?
$(document).ready(function() {
if(window.location.href.indexOf('.modal-content') != -1) {
$('.modal-content').modal('show');
}
});

As a general rule (and for good reason) when you redirect someone you don't and shouldn't have control over what their site displays. Your only bet would be to see if the host site already has this capability, and route to that URL.
Your app not having control over someone else's app is very important to web security.

Related

How to hide navigation bar in pwa when opening external link

what is the best possible solution to hide navbar with three dots when opening external website in PWA app?
The case is that the app is already build, but when clicking the external link I wanted to open as standalone mode in app, so the only possible way to go back will be by using swipe gesture on android ;)
That is the code used for open this:
class="space-button"
on:click={() => {
if (depObj.viewUrl) {
window.location.href = depObj.viewUrl;
}
}}
>
BUTTON TO OPEN EXTERNAL LINK
</div>
In your webmanifest.json the scope attribute defines what websites belong to your app. If the user navigates to a website not covered by the scope, it will be opened outside of the application window.
See more here: developer.mozilla.org

JavaScript redirect user to new page

I am working on a web app using Firebase and Vanilla JavaScript. Let's say I have home page index.html, when user clicks to sign in, a popup appears where he will enter details. Since he signs in it means the URL should be localhost:5000/signin. Is it possible to do it with JavaScript from frontend or is there a need to add Node.js to redirect user respectively.
I am confused how this works and would appreciate if someone could explain how should I approach this.
You can change the url without changing or reloading the page in modern browsers.
window.history.pushState({}, 'Signin', '/signin');
Or you can use replaceState since you are using modal, however it will break back button functionality.
Please look at pushState
This will work:
<script>
function signin() {
window.open("/signin", "_blank", "width=500,height=300")
}
</script>
You can change width and height to your sign-in page width and height. Also, you can add some other properties to your popup. For more information visit https://www.w3schools.com/jsref/met_win_open.asp
This also might be helpful if you want to make your page maximized How to open maximized window with Javascript?

Hide UI element of a webpage from other page [wordpress]

i'm new to web and facing issue while hiding a UI element in a webpage from another webpage.
Scenario:
I've a WordPress site (Theme-TwentySeventeen).
I've added a Logout button programmatically on page as shown in image.
I've multiple posts,
and every post has a button (play video).
When user taps on Play Video button, an iframe appears (fancybox). It has another button "Login".
I want to show/hide Logout button on main page based on the click on "Login" button in iFrame.
I tried to access Logout button using it's ID from iFrame. But it's not part of iFrame source code. and i was not able to access it.
P.S. I can show/hide logout button from the main page using JQuery.
Query:
Is there any way in web to pass notification from one page to other pages? Please guide
i fixed this issue by accessing element from parent window. My code is as:
function showLogoutButton(){
var logoutButton = window.parent.document.getElementById('logout');
if (logoutButton) {
logoutButton.style.display = 'block'
}
}
I'm not sure if it's a good practice. Please suggest if you've any other approach.

Forcing a user to authenticate using a pop-up

I have a page I want only authenticated users can come to. Also I want to authenticate them using a pop-up when they come to that page, say, twitter bootsrap or foundation. How can I do that if a user can just close it? It's unreliable, isn't it?
There is a risk that the user changes the css properties of your live page, to make it invisible pop-up. A simple tool like Firebug makes this possible. Authentications pages are safer in a page intended for this purpose.

How do I refresh the sharing URL for the AddThis Facebook button?

I'm using AddThis to render group of social media icons in the header of each page of my web app.
This is a Single Page Application (SPA), built on Angular.
So whenever the user navigates to another page, there's not a full page reload, but the components on the page are reloaded.
The trouble is, all the AddThis configuration stays the same. So even when the social media buttons get refreshed, the same sharing URL is shown when the user clicks the Facebook sharing button.
How can I clear this and replace it with the current page URL on each page reload?
From mucking around in the Chrome Console, I discovered a global property, addthis_share, which seems to allow me to update the sharing URL.
So I used code like this to updated it on each page reload:
window['addthis_share'].url = window.location.href;
window['addthis_share'].title = window.document.title;
I've encapsulated all the reloading code into a function, addthis_reload.
I had the same problem, but I found out that you could simply call addthis.toolbox() when you want the links to update.

Categories