In case of Edge browser say Browser One, passing a custom argument to second Browser.
if I pass a string it is available in the second window. But, if I pass an object (say XMLDocument) in the second window, I could not serialzetoString.
var myWin = window.open(...);
myWin.customArg = 'string parameter' // Works
myWin.customArg = xmlObject // Doesnt Work
in the second window,
new XMLSerializer().serializeToString(xmlDoc)
throws xml parser exception.
Can any one help in resolving this?
Same code works fine for Chrome.
Edit - Sample code of Parent Window is here -
<html>
<head>
<script type="text/javascript">
function OpenWindow()
{
var objXML = '<SelectedCharts><Chart ColumnNo="1" ChartName="E0PK" GroupName="test" OrderNo="1" /></SelectedCharts>';
var xmlDoc = new DOMParser().parseFromString(objXML,'text/xml');
var dialog = window.open("Child_Window.htm", "title", "width=550px, height= 350px,left=100,top=100,menubar=no,status=no,toolbar=no");
dialog.dialogArguments = xmlDoc ;
dialog.opener = window;
}
</script>
</head>
<body>
<span>Passing an XML Object to the child window:</span>
<input type="button" value="Open Popup" onclick="OpenWindow()" />
</body>
</html>
And the sample code of Child window is here -
<html>
<head>
<script type="text/javascript">
function onBodyLoad()
{
alert(new XMLSerializer().serializeToString(window.dialogArguments));
}
</script>
</head>
<body onload="onBodyLoad()">
<span>This is child window.</span>
</body>
</html>
The code snippet shown in the question works fine for Chrome browser. And to pass the context to another window in case of Edge browser, follow the below method.
declare a global variable and set it in the parent window
And, access the varable in the child window using window.opener.
And sample code is provided in Pass custom arguments to window.open in case of Edge browser
Related
So what's the deal? I'm simply trying to read text from this file. However, this code has the odd effect that, when I click the button, it seems to take the content of the page as the responseText, and will duplicate the button and paragraphs. Yet as far as I can tell I am mimmicking the W3Schools example, yet it doesn't work.
<head></head>
<body>
<button onclick = "loadDoc()">Something to load?</button>
<p>Here's a paragraph</p>
<script>
function loadDoc(){
let xhttp = new XMLHttpRequest();
xhttp.onload = function()
{
document.write(this.responseText);
}
xhttp.open("GET", "testText.txt");
xhttp.send();
}
</script>
</body>
This is the example code that I have on my page
<!DOCTYPE html>
<html lang="en" dir="ltr">
<script src="https://www.netapp.com/us/static/js/jquery-1.8.1.min.js"></script>
<body>
<p>
<button class="bcls-button" onclick="playVideo()">Play Video</button>
<button class="bcls-button" onclick="pauseVideo()">Pause Video</button>
</p>
<div class="n-container">
<div class="n-row">
<div class="n-col-md-12">
<h2>Advanced (non-iFrame):</strong></h2>
<iframe src="//players.brightcove.net/260701648001/FcmqUildl_default/index.html?videoId=5448507890001" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" style="width: 640px; height: 360px;"></iframe>
</div></div></div>
<script>
var cid = "12345";
var theProtocol = location.protocol,
theURL = theProtocol + "//players.brightcove.net",
// Get a reference to the iframe element
iframeTag = document.querySelector("iframe"),
// Retrieve window object needed for postMessage
win = iframeTag.contentWindow;
console.log('theURL:', theURL);
console.log('win:', win);
function playVideo() {
// Post message passing 'playVideo' as the data
win.postMessage(cid, theURL);
}
function pauseVideo() {
// Post message passing 'pauseVideo' as the data
win.postMessage("pauseVideo", theURL);
}
</script>
</body>
</html>
The plugin code is added in the Brightcove player as per this reference https://support.brightcove.com/brightcove-player-sample-playpause-video-iframe-parent
videojs.registerPlugin('listenForParent', function() {
var myPlayer = this;
// This method called when postMessage sends data into the iframe
function controlVideo(evt){
console.log("evt.data" + evt.data)
};
// Listen for the message, then call controlVideo() method when received
window.addEventListener("message",controlVideo);
});
This works fine when i click on the PlayVideo. I need to make this work on load. If i call the function PlayVideo on document ready it gives error saying Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://players.brightcove.net') does not match the recipient window's origin ('http://localhost').
Any idea?
I am new to coding so I am looking for the simplest way to take and image and show or hide it based either on one button or via radio button controls. Currently the image is on as an but i can use the any recommend method. If at all possible from a different page on my site.
For a button, you could use
<html>
<body>
<script type="text/javascript">
function addimage() {
var img = document.createElement("img");
img.src = "IMAGE_URL_HERE";
img.height = IMAGE_HEIGHT;
img.width = IMAGE_WIDTH;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.body.appendChild(img);
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
I've read the documentation on tabs examples of the firefox add-on SDK. I may be wrong, but doesn't the tabs API apply to new tabs?
There doesn't seem like there is a simple way to click a button on a panel and simply change the url of the current (main) window.
I assume I need a content script to accomplish this?
// panel.html
<!DOCTYPE>
<html>
<head>
<script>
function goToHome() {
window.location.replace(http://domain.com/home)
}
</script>
</head>
<body>
<form id="frm1" action="" method="post">
<div><input type="button" onClick="goToHome()" name="Submit" value="home"></div>
</form>
</body>
</html>
The tabs API applies to all open tabs. You can refer to individual tabs by index–var tab = tabs[x]–or the current tab with var tab = tabs.activeTab. Then you can set the url with tab.url = someUrl. Put this code inside the onclick property of a widget and you're good to go. All code goes in main.js, no content scripts needed.
If by "on a panel" you mean inside a panel, then yes, you'll need a content script for the panel, but not a page script as your code shows. See scripting panel content. Example:
main.js
var tabs = require("sdk/tabs");
var data = require("sdk/self").data;
var panel = require("sdk/panel").Panel({
contentURL: data.url("panel.html"),
contentScript: "function goToHome() {self.port.emit('goToHome', homeUrl);}"
//OR
contentScriptFile: data.url("panel.js")
});
panel.port.on("goToHome", function(homeUrl) {
tabs.activeTab.url = homeUrl;
}
If you use contentScriptFile, then include panel.js in your data folder. This will get injected into panel.html.
panel.js
var homeUrl = "http://www.google.com/";
function goToHome() {
self.port.emit('goToHome', homeUrl);
}
I'm trying to create a create a new CKEditor ver4 instance in response to the user clicking on an element. Due to the nature of the application, I can not use the "autoInline" feature as outlined in the CKEditor Sample. While the sample below does in fact create an editor instance, that instance has a significant problem. Inline instances are supposed to disappear when the user clicks away from them. In this example however, the user must first click away, click back into the instance, and then click away again. How can I prevent this?
<!doctype html>
<html>
<head>
<script src="jspath/ckeditor.js"></script>
<script>
var editor = null;
CKEDITOR.disableAutoInline = true;
function init() {
var e2 = document.getElementById("element2");
e2.addEventListener("click", function () {
if(!editor) {
editor = CKEDITOR.inline(e2);
editor.on('instanceReady', function () {
console.log("instanceReady")
console.log(editor.focusManager.hasFocus);
});
editor.on('focus', function() {
console.log("focus");
})
editor.on('blur', function() {
console.log("blur");
editor.destroy();
editor = null;
})
}
})
}
</script>
</head>
<body onload="init()">
<div tabindex="0" id="element2" style="background-color: yellow;" contentEditable = true>Element 2</div>
</body>
</html>
Despite the fact that editor.focusManager.hasFocus was true, the editor's element did not in fact have focus. Perhaps this is a bug? Anyway, adding editor.focus(); to the instanceReady function resolved the issue.