I have an HTML iFrame inside which there is a function which I do not want to run until the site sends a message using window.postMessage() to the iFrame.
My iFrame Code:
<script src="https://js.stripe.com/v3/"></script>
<script>
const stripe = Stripe('pk_test_XXXXXXXXXXXXXXXXXX');
window.onmessage = (event) => {
if (event.data) {
let jackpotId = event.data.id;
myFunction(jackpotId);
}}
function myFunction(jackpotId) { //this function runs on page load
stripe.redirectToCheckout({
sessionId: jackpotId
}).then(function (result) {
});
}
</script>
I want the above myFunction() to run only when the page runs this code:
let obj = {
id: response.id
};
$w("#html2").postMessage(obj);
Currently the iFrame function runs on page load and gives error in the console due to the missing session ID.
Related
I have a script on a page:
<script type="text/javascript">app_id="ID_HERE";distribution_key="dist_6";</script><script type="text/javascript" src="https://loader.knack.com/ID_HERE/dist_6/knack.js"></script><div id="knack-dist_6">Loading...</div>
If I go to the page via a NuxtLink in the navigation the script runs, however if I type the URL to the browser address bar it doesn't.
Is there a way to force the NuxtLink result when the page is accessed directly?
The script tag is coming from a CMS so there isn't a way to hardcode it somewhere nice.
There is a head method (Docs) which will let you to load external scripts but
I can't find the documentation for the script property.
I would dynamically load the script only on the client side like this:
<template>
<div id="knack-dist_6">Loading...</div>
</template>
<script>
export default {
// ...
async created() {
// Do not load the script on the server side
if (!process.client) return
// Function to load the external script
function loadLib(id, distKey) {
const scriptId = 'knack-js'
return new Promise((resolve, reject) => {
// If script already exists than do not load it again
if (document.getElementById(scriptId)) {
resolve()
return
}
const s = document.createElement('script')
s.src = `https://loader.knack.com/${id}/${distKey}/knack.js`
s.id = scriptId
s.type = 'text/javascript'
s.onload = () => {
resolve()
}
s.onerror = (e) => {
reject(e)
}
document.head.appendChild(s)
})
}
try {
if (!window.app_id) {
window.app_id = 'ID_HERE'
window.distribution_key = 'dist_6'
}
await loadLib('ID_HERE', 'dist_6')
} catch (e) {
// Handle script loading error
console.error(e)
}
}
}
</script>
After successfully logging in, from first screen I am requesting some data from web & I want that data set to transfer to the next screen but my application failed to load that data set onto the screen.
From html file I require renderer.js like below
<script>
require('./renderer.js');
</script>
After a successful login, I called the following event in main.js from renderer.js
if ($("#proceed").length > 0) {
$("#proceed").on('click', function () {
var data = '';
ipcRenderer.send('producer-proceed', data);
})
}
This following code is in main.js
ipcMain.on('producer-proceed',function (event,arg) {
var user_name_data = 'Lorem Data';
mainWindow.webContents.send('set_data', user_name_data);
mainWindow.loadURL('file://' + path.join(__dirname, 'screen.html'));
});
To load data onto the html I called the following event in renderer.js
ipcRenderer.on('set_data', function (event, data) {
console.log(data);
$("#seuser_name").text(data);
});
I'm trying to post a message using the postMessage function to a browser that I've opened using window.open and while I've found a couple of articles explaining on how to do it:
Window.postMessage()
HTML5’s window.postMessage API
I just can't get it to work.
In my grid, when double clicking on a row, I call the following code:
var win = window.open('#Url.Action("Index", "StandaloneViewer")', '_blank',
'width=600,height=800,scrollbars=yes');
var domainOrigin = document.location.origin;
var message = 'My Message';
win.postMessage(message, domainOrigin);
and in my Index.cshtml, I've got the following:
$(document).ready(function () {
window.addEventListener('message', function (event) {
debugger;
var domainOrigin = document.origin;
var domainPath = document.location.href;
if (event.origin !== domainOrigin) return;
...
}, false);
});
I've also tried the same code in the load event:
$(window).on("load", function () {
window.addEventListener('message', function (event) {
debugger;
var domainOrigin = document.origin;
var domainPath = document.location.href;
if (event.origin !== domainOrigin) return;
...
}, false);
});
but to no avail! Any ideas what I may be missing? I've got the same scenario working just fine when sending a message to an iframe but I have a use case where I need to launch a separate browser and send a message to it.
I'm currently testing this on the latest version of Chrome.
Thanks.
So on subdomain of my domain I have a html file, for example called file.html, which also includes <script src="https://example.com/script.js"> in itself.
Then, this script.js has some listeners connected with this html, and also the function to send messages to parent, which look as follows:
v.sendMessageToParent = function (message) {
var jsonMessage = {
action: message
};
var win = window.frames.target;
win.postMessage(jsonMessage, '*');
};
v.sendActionMessageToParent = function (action) {
var jsonMessage = {
action: 'action',
type: action
};
var win = window.frames.target;
win.postMessage(jsonMessage, '*');
};
Then, on another domain I have an iframe, which src is file.html.
This another domain also has some <script src="example.com/main.js">, and I need this main.js to listen to messages sent from script.js.
In main.js I have this code:
if (window.addEventListener) {
window.addEventListener("message", messageHandler);
} else {
window.attachEvent("onmessage", messageHandler);
}
function messageHandler(event) {
console.log(event.data);
}
But I don't get anything. No JS, domain or other errors are shown, just silence in console.
Where am I wrong?
Probably you forgot to name your iframe "target":
<iframe src="http://target.com" name="target">
<script>
var win = window.frames.target;
win.postMessage("message", *);
</script>
I am creating a firefox addon using xul. I have added a dynamic iframe using following script:
//addon script:
let chromeUrl = 'https://myserver/downloadProduct.html';
Components.utils.import('resource://gre/modules/Services.jsm');//Services
let activeWindow = Services.wm.getMostRecentWindow('navigator:browser');
let mainDocument = activeWindow.document;
let iframeEl;
iframeEl = mainDocument.createElement('iframe');
iframeEl.id = "d";
iframeEl.setAttribute('src',chromeUrl);
iframeEl.setAttribute("tooltip", "aHTMLTooltip");
iframeEl.setAttribute("autocompleteenabled", true);
iframeEl.setAttribute("autocompletepopup", "PopupAutoComplete");
iframeEl.setAttribute("disablehistory",true);
iframeEl.setAttribute('type', 'content');
iframeEl.setAttribute('height', '32px');
window.document.documentElement.insertBefore(iframeEl, window.document.documentElement.window);
window.addEventListener("message", receiveMessage,false);
Above script is successfully adding a new iframe on page. Now I want to receive messages from iframe to my addon. I have created a postMessage event in iframe script, script as follows:
//iFrame Script:
<script type="text/javascript">
$(document).ready(function () {
$("#Download").click(function () {
parent.postMessage({ Action: "DOWNLOADED", Result: null }, "*");
})
$("#NotNow").click(function () {
parent.postMessage({ Action: "NOT_NOW", Result: null }, "*");
})
$("#Never").click(function () {
parent.postMessage({ Action: "DO_NOT_SHOW", Result: null }, "*");
})
});
</script>
But I am not able to receive message in my firefox addon.
Can anybody help?
Solution is:
window.document.getElementById("iframeId").contentWindow.document.getElementById("elementId").addEventListener('click', function() {
//Do something
}, false);
This script can be added just after adding dynamic iframe on the page.