I have an iframe embedded in my component. When I use
this.$router.go(-1);
To go back to the previous page, it makes the iframe go back to the previous page instead of the current window.
It doesn't go back until it finishes going back on all the pages I visited within the iframe.
How can I make vue return to the previous route/page without including the iframe's navigation?
you can try some like:
//
# main component:
//
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [
// ...
]
});
Window.vueRouter = router;
//
# iframe component:
//
window.parent.vueRouter.go(-1);
I had a similar problem where changing the content of an iframe pushed state to history. Not adding content the first time around, just when I changed it.
<iframe :key="activeMedia.id" :src="getYoutubeLink(activeMedia.id)" scrolling="no" frameBorder="0" />
Adding a key forced the element to unmount and mount again and the problem was gone.
Related
Here's a barebones example of what I'm working with:
https://codesandbox.io/s/peaceful-faraday-xl3kz0?file=/src/Tabs.js
import { Tab } from "#headlessui/react";
export default function Tabs() {
return (
<Tab.Group>
<Tab.List>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel>Content 1</Tab.Panel>
<Tab.Panel>Content 2</Tab.Panel>
<Tab.Panel>{renderIframe()}</Tab.Panel>
</Tab.Panels>
</Tab.Group>
);
function renderIframe() {
return (
<iframe
src="https://en.wikipedia.org/wiki/Main_Page"
height="800px"
width="800px"
title="Example"
loading="eager"
></iframe>
);
}
}
If you click on tab 3, you should see an iframe pointed at Wikipedia. However, if you navigate to another page within the iframe ('Current events', for example), and then click on tab 1, and then click on tab 3 again, the iframe will load the Wikipedia home page again. Is there a way for me to maintain the state of this iframe so that even after I change tabs, it's exactly the same as it was before when I go back to tab 3?
It doesn't look like there's a standard way of doing it, judging from this answer you may need a custom event listener that stores the last clicked url in some state or a cookie (if you want to persist between refreshes), then in your iFrame you can do
src={lastUrl || 'https://en.wikipedia.org/wiki/Main_Page'}
An alternative hacky approach could be to mess around with z-index so that tab 3 never actually is removed from the screen, but just sitting in the background hidden by CSS (haven't tested this). But there may be some performance concerns with this approach should it work.
I am rendering some html content from the service. Some of those html content having links to external web pages. There I need to stop redirecting to those pages and redirect to some other routes which are defined in the frontend. My attempt is as below.
<div v-html="content" class="content" #click="handleClicks">
</div>
handleClicks(event) {
let { target } = event;
const url = new URL(target.href);
if(url=="http://abc.apps/recharge") {
event.preventDefault();
this.$router.push('/myaccount/detailed');
}
},
But it will not redirect to my defined route. It's directly moving to http://abc.apps/recharge. Where I was get wrong here?
I want to inject a new state to browser history when the platform is loaded for the 1st time so when the user clicks browser back button it should land to the home page of the app.
I tried to add new state using
1. PlatformLocation pushState()
2. window.history.pushState()
location.pushState(null, 'home', 'home');
// window.history.pushState(null, 'home', 'home');
I even tried giving full URL
location.pushState(null, 'home', 'http://localhost:4200/home');
// window.history.pushState(null, 'home', 'http://localhost:4200/home');
It does add a new state to browser history but when I click browser back button, nothing happens i.e. I am still in the same page but only the newly added state is removed from the browser history.
I already answered this in your other question here: https://stackoverflow.com/a/55511843/11289490
When you call to the history.pushState , it only adds one page to the history with the url you want, but It doesn't load the webpage or check if it exists.
If you want to load the home page when you navigate back you can do something like this :
let locat = location.href;
if (!!window.location.pathname && window.location.pathname !== '/') {
history.replaceState(null,null,location.origin);
history.pushState(null, null,locat);
}
It adds a history with the url base and then add the complete url in the history.
I've an app built with Electron and Vuejs / Vue-router.
In my electron's index.js I have this function, for hide the window once time I've opened the app.
mainWindow.hide();
I have also a Splash-Page built with Vuejs that make a redirect if user is Logged, some like:
if(this.isLogged()){
this.$router.push({name: 'logged-view'})
}else{
this.$router.push({name: 'login-view'})
}
My problem is that if I hide my window with mainWindow.hide() the Splash-Page make a push of route but it will never create a component (login-view or logged-view).
Instead if I remove mainwindow.hide() the app redict towards my component correctly.
Yes I can hide window once time I am in the new component after redirect, it isn't the behavior that I would have.
So is there a way for redirect if mainwindow is hidden?
For others Developers:
I've solved.
I don't call a mainwindow.hide() anymore, but I have put in my browserwindow creation:
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
show:false // this for solve the problem of router.push() avoid mainwindow.hide()
})
I'm currently using VideoJS in a Rails application (where there is a video player on every page) to display videos and I'm encountering a very strange problem:
The player works perfectly fine on the first page I visit but if I play the video and visit another page, the video from the first page keeps playing in the background even though the page isn't open anymore (you can hear the audio) and the video on the page you visited doesn't initialize properly (options aren't applied which means the video can't be played because controls are an option) and the console reads VIDEOJS: WARN: Player "player" is already initialised. Options will not be applied.
How to I get VideoJS to unload itself when the user leaves the page and why does it keep playing in the first place, the HTML5 video player didn't do that before.
Is the best way around this to get VideoJS to reload itself manually on page load? If so, how can that be done?
Note: If I navigate to any other page within the website the videos continue to not initialize, but if I reload the page, any page, the video on said page works again.
Note 2: Turns out that the onbeforeunload javascript event doesn't even fire if I click a link to another page, it only fires if you're going to a whole different website, so I can't even use that to .dispose() VideoJS on page unload.
Note 3: .reset() doesn't seem to be working either.
You can check to see if the player already exists and unload it, then reload it.
I was actually able to figure out a fairly simple and elegant solution:
if (player) {player.dispose()} else {var player}
player = videojs('player', {
//options
});
First it checks to see if the player exists. If it does, it destroys the VideoJS instance. If it doesn't, it creates the variable. Then it initializes the player.
By Referring this issue : https://github.com/videojs/video.js/issues/2904
We can re-write the above solution to something like this:
const playerId = 'video-player';
const videoOptions = {
controls: true,
sources: [{
src: 'test-file.mp4',
type: 'video/mp4',
}]
};
let player;
let players = videojs.players;
const imaOptions = { adTagUrl };
if (players && Object.keys(players).length) {
player = players[playerId];
player.dispose();
}
player = videojs(playerId,videoOptions);
player.ima(imaOptions);
I found this one to be the solution:
var oldPlayer = document.getElementById('my-player');
videojs(oldPlayer).dispose();
it's in the docs actually