i cannot create listener in my html-script to because the way to navigate the html is using inside/built in script from header source
right now when the snap-html is close, it would return blank and i have to manually use back button, and when the redirect finish, I use render count because i have no idea how to detect the inside built in event
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript"
src="https://app.sandbox.midtrans.com/snap/snap.js"
data-client-key="Client key"></script>
</head>
<body>
</body>
it's like opening snap, but i need to detect when it closes/ accepting redirect finish, so i could navigate back when the snap-html is forced to close/finish.
Related
There are three pages, A, B and C.
A has a tag whose href redirects to B.
B has JavaScript Code and redirects to C.
When in C, I click browser back button, browser redirects to A. Why not B ? Thank you in advance.
Test Links
Page A: http://o17o2o.com:8000/article-href.html
Page A
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Test</title>
</head>
<body>
click me
</body>
</html>
Page B
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>waiting</title>
</head>
<body>
Page B
<script type="text/javascript">
window.location.href = '/original.html';
</script>
</body>
</html>
location.href redirect will only add to browser history if it is from user initiated action. Here you are calling it on onload event so it wont be added to history
user History.pushState to insert in browser history
I have an observation here. If we add a setTimeout before calling location.href programmatically, say a 2 sec delay, the current page gets added in the history. Looks like this behavior is somewhat asynchronous and it happens in all browser. I wonder why this bug is not solved for so long.
Manually tested:
If user didn't interact with the document first (like keydown, click, but not wheel),
calling location.href=xx programmatically, the current page will not added to the history record.
Zoho CRM has something called Widgets to extend it's functionality. Using the widgets feature, you can directly embed UI components in a CRM and use the data form a third-party application to perform actions as per requirement.
A widget is basically an HTML file which is loaded in a popup once a custom button is fired. To store/retrieve data from Zoho CRM you need to load jQuery and their JS SDK in the HTML file.
The most basic HTML file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://live.zwidgets.com/js-sdk/1.0.5/ZohoEmbededAppSDK.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
ZOHO.embeddedApp.on("PageLoad",function(data) {
console.log(data);
//Custom Business logic goes here
});
ZOHO.embeddedApp.init();
</script>
</body>
</html>
In this file console.log(data) will log information about the page on which the widget is fired. On for instants a Lead page, it will log information about that lead, like the id.
Functions to store/retrieve data need to be used where it says //Custom Business logic goes here.
The code for getting all Leads in this widget looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://live.zwidgets.com/js-sdk/1.0.5/ZohoEmbededAppSDK.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
ZOHO.embeddedApp.on("PageLoad",function(data) {
ZOHO.CRM.API.getAllRecords({Entity:"Leads"})
.then(function(data){
console.log(data)
})
});
ZOHO.embeddedApp.init();
</script>
</body>
</html>
Because I need to create multiple Zoho Widgets and use the same Vue Components on every Widget I thought of using NuxtJS. I successfully create the Vue Components, but I have no clue how to incorporate Zoho's JS SDK.
Is there anybody who can give me some suggestions how to make this work? Thanks!
why not having the SDK function in a external file from your html, where you invoke all the methods from the SDK api?
simply import your SDK to the header of the html.
hey i found this solution on the github issues page that actually worked. hopfully it will help you.
under data you can define your script as a string somthing like this:
<template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div v-html="scripts"></div>
</template>
<script>
export default {
data: () => ({
scripts: "<script src='https://www.google.com/recaptcha/api.js'><\/script>"
})
}
</script>
and then just add a div tag in your page with v-html="script"
i tried it and it worked fine. but i don't feel it's the best practice. hopfully this will help you.
the source and all the discussion on github: https://github.com/nuxt/nuxt.js/issues/2000
In my angularjs app when I use the browser's back button to navigate to the previous page. The headers of my app don't switch back.
I haven't handled this problem because I assumed this would be catered when the page loads.
The app is large so there isn't any specific code. The problem is throughout the app.
I expect the headers to change back to the previous page's regardless of if I am navigating using in app buttons or through the browser's back button.
You have to bind it to the data in controller and change it using your code
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-language" content="en"/>
<!-- other stuff -->
<!-- dynamic data -->
<meta name="description" content="{{htmlDescription}}">
<link rel="shortcut icon" type="image/x-icon" ng-href="{{htmlFavIcon}}"/>
<title ng-bind="htmlTitle"></title>
when you hit back button from ctrlB, previous controller (let's call it ctrlA) logic should be fired. Inside ctrlA :
$rootScope.htmlTitle = ' title of screen A';
$rootScope.htmlDescription = ' html desc of screen A';
I am facing a problem developing a stencil.js web component. I have this error:
(index):28 Uncaught TypeError: comp.hideDataPanel is not a function
at HTMLDocument. ((index):28)
I want to integrate my stencil component to a bigger browserify project
Before doing that I am trying the following index.html with the stencil server-dev
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Advanced SearchBar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<meta name="theme-color" content="#16161d">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
<script src="/build/app.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Added -->
<link rel="manifest" href="/manifest.json">
</head>
<body>
<advanced-searchbar target_url="http://localhost:1234/results" target_id="pdbCode"></advanced-searchbar>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
let comp = document.getElementsByTagName('advanced-searchbar')[0];
comp.hideDataPanel(); // --> Does not work all the time
})
let comp = document.getElementsByTagName('advanced-searchbar')[0];
comp.addEventListener('clickedOnResult',function(e){
comp.hideDataPanel(); // --> Works Fine
})
</script>
</body>
</html>
Methods of my component appear to be unresolved at the DomContentLoaded event while, the same method is resolved at the asychronous user click event. Note that user can use .hideDataPanel() method thanks to #Method() inside typescript code (as shown here: https://stenciljs.com/docs/decorators)
For the purpose of future integration I would like to bind my stencil component method at the startup of my web application.
How do i do that ?
Shall i wait for a particular event in the page or component lifecycle for component method to be resolved ?
Thank you in advance
Maybe my understanding is wrong and I've never used the event, but according to mdn it sounds like the "DomContentLoaded" event is fired when the HTML DOM has been loaded. I guess that's too early for our webcomponents to be loaded, as they're coming from JS.
So you'd need to register on an event that fires when the whole page (including JS) has been loaded which I guess is window.load.
You could also add an #Event() within the stencil component you're trying to access after it has been loaded and .emit() that event within componentDidLoad(). Stencil events seem to propagate upwards in your dom-tree, so they'll eventually reach document.
So you can register and event listener on that event like:
document.addEventListener('myCustomStencilEvent', handlerFunction);
I had recently posted a question regarding my problem here.
When i click on a SUBMIT BUTTON or a LINK, I do not want the history of the page where the user clicked the BUTTON or LINK to get recorded in browser.
I received a suggestion to use history.pushState(). But I am not familiar with the function and I urgently need the solution to work.
I still not sure as to what to do. But can anyone suggest me whether I can use this to solve my problem.
<input type="submit" onclick="location.replace(this.href); return false;"/>
Continue
Example : I have a page bar.html which has a link Foo. When the user clicks on the link, he should be redirected to foo.html and browser history of bar.html should not get recorded so that the user cannot use BACK button to get back on this page.
Edit: Also how can I force the browser not to store a certain page in cache, so the next time user visits, the browser requests the server for the page.
For chnage page with JS, use code like this:
Continue
But i don't sure about it history work.
Here is an working example:
File: a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A</title>
</head>
<body>
<h1>A</h1>
B
</body>
</html>
File: b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>B</title>
<script>
window.location.replace('c.html');
</script>
</head>
<body>
<h1>B</h1>
C
</body>
</html>
File: c.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>B</title>
</head>
<body>
<h1>C</h1>
</body>
</html>