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?
Related
I have a button on my page that opens the page in the default browser:
<button type="button" title="view full size in browser" onclick="NewTab()">
view in browser
</button>
<script>
function NewTab() {
window.open(
"https://mypage.aspx", "_blank");
}
</script>
The button should only be displayed if the page is not yet shown in a browser, for example if it is shown embedded in a Microsoft Teams page as a website tab.
How can I detect if the page is displayed in a browser and then remove the button?
There is no inbuilt function in teams. You have to manage this code manually.
If you use static tab/Configurable tab you need to add one parameter in manifest json content URL section like below:
"contentUrl": "<<your base url>>/Demo/?inTeams=true"
Add the below code in view file to detect if parameter is true it is inside the teams If false it is outside in teams.
const url = new URL(window.location);
const params = new URLSearchParams(url.search);
if (params.get("inTeams")) {
alert("inside teams");
} else {
alert("inside browser");
}
<iframe src="http://runebet.com/" width="80%" height="65%" name="runeBetAPI"></iframe>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
function RegisterPage() {
window.frames["runeBetAPI"].location = "http://runebet.com/register/";
}
RegisterPage();
</script>
This doesn't seem to work/change the content..
The URL should start with http://www. to avoid a server redirection
you can access iframe contents from the same domain only read here.
You can use the following to change the source of the iframe.
function changeSource(src, frameID) {
var frame= $('#' + frameID);
if ( frame.length ) {
frame.attr('src',src);
return true;
}
return false;
}
But apparently what looks like looking into what your code is doing the url that you are redirecting to it actually opens a registration form inside modal window, which for some reason is not opening if you access it via an iframe, because if you put the url http://runebet.com/register/ directly in the iframe and load the page it will still be showing the landing page so it is redirecting but the modal is not popping up that leaves you with the last thing that you have to trigger the Register link click and that can only happen if you are in the same domain if not maybe someone else knows, i dont.
$(window.frames[0].frameElement.contentDocument).find('a[href="/register"]').trigger('click');
I am installing a social network sharing plugin to my website and I notice that I can only share one link.... the main index link.. How would I go about using pushstate to change the url in my browser to load each specific page on my website when sharing. Becuase using my ajax code I only have one URL and thats https://trillumonopoly.com. Im not familiar with pushstate but ive read that it is what im looking for.
for example if I want to social share the page for music on my website so when people click the link it will take them to my website index page with that specific page loaded into the div. How will I do it.
heres my jquery / ajax code
$(document).ready(function () {
loadMainContent('main');
$('body').delegate('.navMenu', 'click', function (event) {
event.preventDefault();
loadMainContent($(this).attr('href'));
});
});
function loadMainContent(page) {
$('#main').load('pages/' + page + '.php');
}
If you have a url like yoursite/someroute then you'll get a not found error. So you'll need to tell apache to serve index.php for those routes using rewrite.
In document.ready you need to check for the url (document.location.pathname) and load the content according to what the path is.
The index page should always show a loading spinner that will be replaced with the actual content based on the path name in the url
Here is some simple sample code of how you could do this:
//if path is /contact then return object with the url to php content page
// and title of the page
const pathToPage = path => {
switch (path) {
case "/contact":
return {
url:"/contact.php"
,title:"Contact"
,path:path
};
}
}
//when user navigates back and forward
window.addEventListener(
"popstate"
,event =>
//only set content, do not mess with history
onlyLoadmain(
pathToPage(location.pathname)
)
);
//load main content with or without messing with history
const loadMainBuilder = (push)=>(page)=> {
//if page is undefined then path is not of known content
if(page!==undefined){
if(push){
//set the url
history.pushState(
{},
page.title
,page.path
);
}
document.title = page.title
//#todo: should show loading here
//$('#main').html(loading);
$('#main').load(
'pages/' + page.url + '.php'
);
}
}
const loadMainAndPush = loadMainBuilder(true);
const onlyLoadmain = loadMainBuilder(false);
//... other code
$(document).ready(function () {
//load the content of current page
// when user gets a url in their email like yoursite/contact the
// apache rewrite rule will serve index.php but main content is
// showing loading untill your code actually replaces it with something
onlyLoadmain(pathToPage(location.pathname));
$('body').delegate('.navMenu', 'click', function (event) {
event.preventDefault();
//the element clicked should have href with the path, not the php file path
//so /contacts not /pages/contacts.php
loadMainAndPush(pathToPage($(this).attr('href')));
});
});
I am using a x-ms-webview to display an embedded media website, It work great by the problem is I can't handle full screen event when user want to go to full screen.
In iframe i can using webkitfullscreenchange to handle this, but with x-ms-webview seem not work.
Anyone can explaint me why and How to handle full screen event came from media in x-ms-webview?
Thanks
We can interact with the content of the web view by using the InvokeScriptAsync method to invoke or inject script into the web view content, and the ScriptNotify event to get information back from the web view content.
To invoke the onwebkitfullscreenchange event inside the web view content, use the InvokeScriptAsync method.
To enable an external web page to fire the ScriptNotify event when calling window.external.notify, you must include the page's URI in the ApplicationContentUriRules section of the app manifest. (You can do this in Microsoft Visual Studio on the Content URIs tab of the Package.appxmanifest designer.) The URIs in this list must use HTTPS, and may contain subdomain wildcards (for example, https://.microsoft.com) but they cannot contain domain wildcards (for example, https://.com and https://.). The manifest requirement does not apply to content that originates from the app package, uses an ms-local-stream:// URI, or is loaded using NavigateToString.
For more info, refer Interacting with web view content.
For example:
<x-ms-webview id="webview" src="https://www.....com" width="1920" height="1080"></x-ms-webview>
<script src="js/main.js"></script>
The js code:
(function (evt) {
"use strict"
var ViewManagement = Windows.UI.ViewManagement;
var FullScreenSystemOverlayMode = ViewManagement.FullScreenSystemOverlayMode;
var ApplicationView = ViewManagement.ApplicationView;
var view = ApplicationView.getForCurrentView();
var webview = document.getElementById("webview");;
webview.addEventListener("MSWebViewFrameDOMContentLoaded", function () {
var op = webview.invokeScriptAsync("eval", "document.onwebkitfullscreenchange = function (evt) { window.external.notify('123'); }");
op.start();
});
webview.addEventListener("MSWebViewScriptNotify", function (evt) {
if (view.isFullScreen) {
view.exitFullScreenMode();
}
else {
view.tryEnterFullScreenMode();
}
});
})()
i want to redirect all traffic going to my Facebook app tab on my server directly to my Facebook app. Therefore I check with the following code if the user is inside the Facebook iframe or on my webpage:
<!-- language: lang-js -->
function referrerIsFacebookApp() {
if(document.referrer) {
return document.referrer.indexOf("facebook.com") !== -1;
}
return false;
}
if (!referrerIsFacebookApp()) {
top.location.replace("https://www.facebook.com/bommelME/app_264697733636385");
};
If I open up the page with the browser everything works as it should. But if I link to this page and open the link the redirect doesnt work. Any hints?
Use window.top to detect whether your app is in an iFrame or not. Try this.
if (window!=window.top) {
/* I'm in a frame! */
window.location = "https://www.facebook.com/bommelME/app_264697733636385";
}
Cheers.
I think you should check the window.parent object instead of document.referrer, because the page can be referenced from another one as you've said but not being included via iframe