This is the code I used to load the external js transaction-element
addTransactionElement() {
this.http.get<any>('../transaction/transactionUrl').subscribe((res) => {
const link = this.renderer.createElement('link');
link.rel = 'stylesheet';
link.href = 'http://localhost:8083/elements/assets/fonts/webadk-icon-font.css';
this.renderer.appendChild(this.document.head, link);
const script = this.renderer.createElement('script');
script.type = 'text/javascript';
this.renderer.setAttribute(script, 'crossorigin', 'true');
script.src = 'http://localhost:8083/transaction-element.js';
script.text = ``;
this.renderer.appendChild(this.document.head, script);
});
}
I can see it loaded though under a different space, localhost:8083, where the element.js is hosted. My own ui space is hosted under localhost:4200.
This is code to render it.
<transaction-element
businessLine="{{ transactionInfo.businessLine }}"
theme="{{ transactionTheme }}"
></transaction-element>
It does not happen. No error messages anywhere. Is it because the external element.js is uploaded under a different space? If so, anyway to correct it?
Thanks
Related
I want to run an external JS which is actually opencv.js. I need to access its CV variable and then calling other functions.
I am adding below codes to my useeffect hook as follow:
export default function PolygonCropper(props) {
...
useEffect(() => {
const script = document.createElement("script");
script.src = "https://docs.opencv.org/3.4.0/opencv.js";
script.async = false;
document.body.appendChild(script);
//
console.log('cv from opencv is');
console.log(window["cv"]);
....
}
However, I can't access window["cv"] and it is undefined when I look at logs in chrome.
EDIT:
looking at Chrome log by console.log(window). I can see the window and CV inside it but I can access window["cv"]
I'm trying to embed the following onto my react site in a specific component/page. When I put the code on the static html page it works beautifully, but it isn't working out when I try to place it onto the component.
The main error I'm getting is saying that chrome won't allow document.write from an external script or something along those lines. I wish I still had the error message, but I've been trying different things and in a fit of frustration deleted it all last night. (Great strategy, I know.) I was able to retrieve the errors, please see at the bottom for details.
<div id="fTelnetContainer" class="fTelnetContainer"></div>
<script>document.write('<script src="//embed-v2.ftelnet.ca/js/ftelnet-loader.norip.xfer.js?v=' + (new Date()).getTime() + '"><\/script>');</script>
<script>
var Options = new fTelnetOptions();
Options.BareLFtoCRLF = false;
Options.BitsPerSecond = 57600;
Options.ConnectionType = 'telnet';
Options.Emulation = 'ansi-bbs';
Options.Enter = '\r';
Options.Font = 'CP437';
Options.ForceWss = false;
Options.Hostname = 'mysite.com';
Options.LocalEcho = false;
Options.NegotiateLocalEcho = true;
Options.Port = 1234;
Options.ProxyHostname = 'proxy-us-ga.ftelnet.ca';
Options.ProxyPort = 80;
Options.ProxyPortSecure = 443;
Options.ScreenColumns = 80;
Options.ScreenRows = 25;
Options.SendLocation = true;
var fTelnet = new fTelnetClient('fTelnetContainer', Options);
</script>
I'm not looking for anyone to do this for me, but if you could provide a tip, point me to some documentation, or any hint whatsoever I would be eternally grateful.
This embed is coming from the following site by the way: http://embed-v2.ftelnet.ca/
EDIT
I'm still working on this, so I tried to get back the error messages and here is what happened:
(index):46 A parser-blocking, cross site (i.e. different eTLD+1) script, http://embed-v2.ftelnet.ca/js/ftelnet-loader.norip.xfer.js?v=1599169227014, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.
A cookie associated with a cross-site resource at http://ftelnet.ca/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
ftelnet-loader.norip.xfer.js?v=1599169227014:1 A parser-blocking, cross site (i.e. different eTLD+1) script, http://embed-v2.ftelnet.ca/ftelnet/ftelnet.norip.xfer.min.js?v=2019-08-31, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.
EDIT2
This is my component at the moment:
class Home extends React.Component {
componentDidMount() {
document.write("<script src='//embed-v2.ftelnet.ca/js/ftelnet-loader.norip.xfer.js?v=" + (new Date()).getTime() + "'></script>" +
"<script>" +
"window.onload(function() {" +
"var Options = new fTelnetOptions();" +
"Options.BareLFtoCRLF = false;" +
"Options.BitsPerSecond = 57600;" +
"Options.ConnectionType = 'telnet';" +
"Options.Emulation = 'ansi-bbs';" +
"Options.Enter = '\r';" +
"Options.Font = 'CP437';" +
"Options.ForceWss = false;" +
"Options.Hostname = 'mysite.com';" +
"Options.LocalEcho = true;" +
"Options.NegotiateLocalEcho = true;" +
"Options.Port = 1234;" +
"Options.ProxyHostname = 'proxy-us-ga.ftelnet.ca';" +
"Options.ProxyPort = 80;" +
"Options.ProxyPortSecure = 443;" +
"Options.ScreenColumns = 80;" +
"Options.ScreenRows = 25;" +
"Options.SendLocation = true;" +
"var fTelnet = new fTelnetClient('fTelnetContainer', Options);" +
"});" +
+ "</script>");
}
render() {
return (
<div>
<h1>TELNET TIME</h1>
<div id="fTelnetContainer" className="fTelnetContainer"></div>
</div>
);
}
}
export default Home;
This also throws the error, Uncaught SyntaxError: Invalid or unexpected token
I encountered a similar issue when I needed to use PayPal scripts (they do not support importing ES6 modules).
First of all, document.write will not work for you because by the time the componentDidMount is invoked, the document is already fully loaded. See https://developer.mozilla.org/en-US/docs/Web/API/Document/write. Therefore calling this again - should the write function push through - will erase everything in the document and write a new one.
To solve your issue, here is what I did: on your initial html document, example index.html, this is where I included your script to load the source codes needed and I assigned the fTelnetOptions object to a window property since you instantiate this later on:
<html>
<head>
<script>
document.write(
'<script src="//embed-v2.ftelnet.ca/js/ftelnet-loader.norip.xfer.js?v=' +
new Date().getTime() +
'"><\/script>'
);
window.fTelnetOptions = fTelnetOptions;
</script>
</head>
Back on your component, do what you have to to initialize the telnet when the component mounts - see the window.fTelnetOptions that we instantiated:
class Home extends React.Component {
componentDidMount() {
var Options = new window.fTelnetOptions();
Options.BareLFtoCRLF = false;
Options.BitsPerSecond = 57600;
Options.ConnectionType = "telnet";
Options.Emulation = "ansi-bbs";
Options.Enter = "\r";
Options.Font = "CP437";
Options.ForceWss = false;
Options.Hostname = "mysite.com";
Options.LocalEcho = true;
Options.NegotiateLocalEcho = true;
Options.Port = 1234;
Options.ProxyHostname = "proxy-us-ga.ftelnet.ca";
Options.ProxyPort = 80;
Options.ProxyPortSecure = 443;
Options.ScreenColumns = 80;
Options.ScreenRows = 25;
Options.SendLocation = true;
var fTelnet = new window.fTelnetClient("fTelnetContainer", Options);
}
render() {
return (
<div>
<h1>TELNET TIME</h1>
<div id="fTelnetContainer" className="fTelnetContainer"></div>
</div>
);
}
}
export default Home;
At this point I am not sure how well this will work with client-side-routing. Refer to my scripts below if you encounter that the fTelnetOptions property in window object is lost when routing:
const script = document.createElement("script");
script.src = `your_script_url`;
script.async = true;
document.body.appendChild(script);
script.onload = () => {
// do your instantiation & logic here
}
https://affiliate-program.amazon.com/welcome/getstarted_fifth
Is it possible to introduce Amazon Native Shopping Ads' 「Search Ads 」 into the React project?
I attempted trial and error, but I do not think that it is probably going well with global variable issues.
Here is how I did it.
If your Native Shopping Ads code looks like this:
<div id="amzn-assoc-ad-xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></script>
In your component,
componentDidMount () {
const script = document.createElement("script");
script.src = "//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
script.async = true;
document.body.appendChild(script);
}
In your JSX
<div id="amzn-assoc-ad-xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"> </div>
Yes it works very well with this logic but I made a better version out of it.
In your React Hook
useEffect(() => {
const script = document.createElement('script')
script.text = `amzn_assoc_ad_type = "banner"; amzn_assoc_marketplace = "amazon"; amzn_assoc_region = "US"; amzn_assoc_placement =
"assoc_banner_placement_default"; .................`
const script2 = document.createElement('script')
script2.src = '//z-na.amazon-adsystem.com............'
script2.async = false
const amazonAdd = document.querySelector('#amzn_assoc_ad_div_assoc_banner_placement_default_0')
if (amazonAdd) {
amazonAdd.appendChild(script)
amazonAdd.appendChild(script2)
}
}, [])
In your JSX
<div id="amzn_assoc_ad_div_assoc_banner_placement_default_0" />
You need to use the exact same id than amazon uses. Take a look in your DOM to see how this amazon script append a div in your DOM, get its id and use the same in your JSX div
How do you add components such as charts in google trends in reactjs?
componentDidUpdate() {
const that = this
const keyword = "your keyword"
conts script = document.createElement("script")
script.src = "https://ssl.gstatic.com/trends_nrtr/760_RC08/embed_loader.js"
script.async = true
ReactDOM.findDOMNode(this.refs.trendsWrapper1).appendChild(script)
script.onload = function () {
trends.embed.renderExploreWidgetTo(ReactDOM.findDOMNode(that.refs.trendsWrapper1), "TIMESERIES", {"comparisonItem":[{"keyword":keyword,"geo":"","time":"today 5-y"}],"category":0,"property":""}, {"exploreQuery":"q=%2Fm%2F0rfgxy2","guestPath":"https://www.google.co.uk:443/trends/embed/"})
}
}
I tried this and didn't work. Please try to suggest a much easier method than this as well.
You need to load the embed_loader script out side of react (like any other 3rd lib code)
At the component, run the trends.embed command.
var Trends = React.createClass({
render: function() {
trends.embed.renderWidget("US_cu_mqCQGFwBAABWOM_en",
"fe_line_chart_309e703b-7d68-4baa-8dc9-c12e2f9defc3",
{"guestPath":"https://trends.google.com:443/trends/embed/"});
return (
<div>must return something :/</div>
)}
});
Here is an example
I am trying to save a pdf file that is loaded in an iFrame. There is by default a button in the iFrame to save the file but I want an extra button (outside the iFrame) to save the file.
<iframe id="labelFrame" src="loadedFile.pdf"></iframe>
<button id="savePDF">Download File</button>
In javascript:
$('#savePDF').click(function(){
var save = document.getElementById('labelFrame');
//Save the file by opening the explorer for the user to select the place to save or save the file in a default location, how do I do this?
}
What is the best way to reach this?
I needed an answer to this question as well and found a solution.
When displaying a PDF in an IFrame the browser will render it in an <embed> element and from there we cant use it in javascript as far as i know.
We'll need to use XMLHttpRequest to get the PDF from a server as a Blob object only then we can both display it and save it using javascript.
var iframe = document.getElementById('labelFrame'),
saveBtn = document.getElementById('savePDF'),
pdfUrl = 'loadedFile.pdf';
var xhr = new XMLHttpRequest();
xhr.open("GET", pdfUrl);
xhr.responseType = 'blob'; // <- important (but since IE10)
xhr.onload = function() {
var blobUrl = URL.createObjectURL(xhr.response); // <- used for display + download
iframe.src = blobUrl
saveBtn.onclick = function() {
downloadBlob(blobUrl, 'myFilename.pdf');
}
};
xhr.send();
The xhr.onload function will set to src of the iframe and add the onclick handler to the save button
Here is the downloadBlob() function that i've used in the example
function downloadBlob(blobUrl, filename) {
var a = document.createElement('a');
a.href = blobUrl;
a.target = '_parent';
// Use a.download if available. This increases the likelihood that
// the file is downloaded instead of opened by another PDF plugin.
if ('download' in a) {
a.download = filename;
}
// <a> must be in the document for IE and recent Firefox versions,
// otherwise .click() is ignored.
(document.body || document.documentElement).appendChild(a);
a.click();
a.remove();
}