I could reduce my problem on a small code snippet. The code creates dynamically an SC player iFrame and displays the ready status. If there is already an iFrame, it removes the old one and creates a new one (runable example on JSFIDDLE):
var player;
var playerId;
var iframe;
var printReady=
function(data)
{
document.getElementById("status").innerHTML = "Ready";
};
function createSoundCloudIframe()
{
document.getElementById("status").innerHTML = "Player not ready";
var contentDiv = document.getElementById("content");
// Remove last Iframe
if(iframe != null){
player.unbind(SC.Widget.Events.READY);
contentDiv.removeChild(iframe);
}
// Create a new Iframe
iframe = document.createElement("IFRAME");
iframe.id = playerId + "ScId";
iframe.src = "http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F41867062&show_artwork=true";
// Append Iframe
contentDiv.appendChild(iframe);
// Show ready status
player = SC.Widget(playerId + "ScId");
player.bind(SC.Widget.Events.READY, printReady);
playerId ++;
};
The code runs fine when it is executed the first time. But when you try it a second time a nullpointer exception (developer console) will be thrown in this method of api.js:
// Uncaught TypeError: Cannot read property 'parentWindow' of null
function s(a) {
return a.contentWindow || a.contentDocument.parentWindow
}
The method which causes the exeption is SC.Widget(iFrameId);
This problem is in my case not solvable with SC.Widget(iFrameId).load(url, options); function and a hiding of the iFrame:
I wrote a google-web-toolkit wrapper for the SC widget api and use this wrapper with other gwt mediaplayer wrappers in a much bigger project. In this project the exception is thrown repeatedly with a delay of milliseconds which slows down everything. The codesnippet above is only a pure javascript reduction of the problem.
I really need a workaround which removes and clean up all dead references in the api.js when the iFrame is removed! I'm looking for such a workaround for month.
Related
Please could somebody help me to resolve this problem?
I have canvas, inserted in html and drawn usng WebAssembly in C, however it seems to block the HTML form input fields - I cannot type anything once the wasm module is loaded and runs...
I use emscripten_set_main_loop_arg() in C instead, of requestAnimationFrame() in JS:
const int simulate_infinite_loop = 1; // call the function repeatedly
const int fps = -1; // call the function as fast as the browser wants to render (typically 60fps)
emscripten_set_main_loop_arg(render, &cbp, fps, simulate_infinite_loop);
Later, I insert it in HTML:
<script type='text/javascript'>
var Module = {};
fetch('app/aghdr.wasm')
.then(response =>
response.arrayBuffer()
).then(buffer => {
Module.canvas = document.getElementById("canvas");
Module.wasmBinary = buffer;
var script = document.createElement('script');
script.src = "app/aghdr.js";
script.onload = function() {
console.log("Emscripten boilerplate loaded.")
}
document.body.appendChild(script);
});
</script>
Does anybody know, hot to ensure that normal HTML form processes messages while WASM module is running?
See: http://inters.cloud/test3/
Perhaps it's caused by emscripten_set_keypress_callback().
When a argument callback returns non-zero, event.preventDefault() blocks a keypress event.
chrome.runtime.onMessage.addListener(receiver);
function receiver(request, sender, sendResponse);
The message listener runs more than once because the application has a frame. I want to get the frame id from background script and pass it to the content script so that if the frame matches I would pass message to the pop up script.
function getXPath(info, tab) {
var msg = {
subject: "getXPath"
};
var inspectedId = tab.id;
var selectedFrameId = info.frameId;
chrome.tabs.sendMessage(inspectedId, msg, { frameId: selectedFrameId });
}
Using the info, I am able to get the frame id, but I don't know how to pass it to the content script.
finally Solved,
Each and every frame has unique document by comparing the document object I am to achieve it.
When pausing a video, the last frame is shown in the element, how can I clear the element so the frame will be cleared and the initial background style of the element will be shown?
var vid = document.getElementById("myVideo");
vid.onpause = function() {
// change background color of element or add overlay to the element
};
I got the answer by looking on an example code. The key is to stop the transmission by connection.close() so no new blobs will come from the sender, and to set the src of the video of the receiver to empty string.
var connection = new RTCPeerConnection({ iceServers: _iceServers });
...
// Close the connection between myself and the given partner
_closeConnection = function () {
if (_connection) {
_onStreamRemovedCallback(null, null);
// Close the connection
_connection.close();
}
},
onStreamRemoved: function (connection, streamId) {
// todo: proper stream removal. right now we are only set up for one-on-one which is why this works.
console.log('removing remote stream from partner window');
// Clear out the partner window
var otherVideo = document.querySelector('.video.partner');
otherVideo.src = '';
}
I'm using swf object to embed a swf. I'm trying to user external interface to to call a flash function from JS, but having trouble. I've searched all the docs, read a ton of stuff, and I'm convinced I'm doing it right. Can anyone point out where the problem might be?
var flashvars = {};
var params = {wmode:"opaque", allowscriptaccess:"always" };
var attributes = {id:"MySwf", name:"MySwf"};
swfobject.embedSWF("MySwf.swf", "flashContent", "600", "400", "9.0.0", "swfs/expressInstall.swf", flashvars, params, attributes,function(e){
if(e.success){
_flashRef = e.ref;
testExternalInterface();
}else{
alert("We are sorry, flash is required to view this content.");
}
});
function testExternalInterface(){
var swf = document.getElementById("MySwf");
swf.sendMeTheGoods("TEST TEST");
};
Above is the embed code and js function in my flash I have
if (ExternalInterface.available)
{
trace("adding external interface");
ExternalInterface.addCallback("sendMeTheGoods", sendMeTheGoods);
}
public function sendMeTheGoods(text:String):void
{
trace("setting vars")
trace(text);
txtYouSent.text = text;
}
I'm getting the error Uncaught TypeError: Object # has no method 'sendMeTheGoods'
I've tried both referenceing document.getElementById("MySwf"); and document.getElementById("flashContent"); and I get the error both ways. Any suggestions?
the external interface API is not immediately available, it takes a second for it to be ready. your callback is likely happening before Flash Player has initialized the EI API. try adding a delay in the callback, delaying the invocation of your 'test' function.
var swf = navigator.appName.indexOf("Microsoft") != -1 ? window["MySwf"] : document["MySwf"];
I have an HTML5 website built using jQuery Mobile.
On my index.htm page I have an ahref. When I click on that link I run a function which does a tx.executeSql and the callback method is run which then navigates to the new page.
The works fine the first time.
If I navigate to more pages and then come back to the index.htm page, the functions are run when the link is clicked, however the callback on the tx.executeSql isn't ever run.
Any ideas would be greatly appreciated. I have used all different mechanisms for calling the functions from javascript to jquery, but it makes no difference.
To be clear - the first function called is setFeaturedRecruiter() - you can see the code below. The second time I come back here the "renderResults" callback function isn't run.
// when we click on the actual featured recruiter link we copy from this table to the featured recruiter table to overwrite its contents
function setFeaturedRecruiter() {
alert('setFeaturedRecruiter()');
retrieveActualFeaturedRecruiter();
return true;
}
function retrieveActualFeaturedRecruiter() {
alert('retrieveActualFeaturedRecruiter()');
db.transaction(function (tx) {
alert('select * from featuredRecruiterActual...');
tx.executeSql('SELECT * FROM featuredRecruiterActual', [], renderResults, pnetOnError);
});
}
pnetOnError = function (tx, e) {
alert('Something unexpected happened: ' + e.message);
}
function renderResults(tx, rs) {
alert('renderResults()');
var idNo;
var name;
var logo;
var totalAds;
for (var i = 0; i < rs.rows.length; i++) {
r = rs.rows.item(i);
idNo = r.idNo * 1;
name = r.name;
logo = r.logo;
totalAds = r.totalAds;
}
writeToFeaturedRecruiter(idNo, name, logo, totalAds);
}
I've worked around this problem by disabling ajax when navigating between pages. This was done by adding to the ahref tag: data-ajax="false". This caused the page to load correctly and overcomes the problem.