Dynamically set iframe src in a XUL window?

[moonbat]

I'm spawning a XUL window to display the Youtube video that's currently open in a tab. The XUL window has an iframe, using their standard iframe embed code I want to set the src at runtime.

I'm doing it like so but the frames listed are 0, and I can't use 'getElementbyID() on the iframe's name either -

Code: Select all

			pmplayerwindowref = window.open("chrome://pmplayer/content/window-youtube.xul", "pmplayerwindow",
				  "chrome,width=640,height=480,resizable=yes,dialog, alwaysRaised,centerscreen");
		pmplayerwindowref.frames[0].setAttribute('src',PMPlayer.Launch.playerIframeSrc);

The XUL window looks like this -

Code: Select all

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://pmplayer/skin/overlay.css" type="text/css"?>
<!DOCTYPE window SYSTEM "chrome://pmplayer/locale/pmplayer.dtd" >
<window id="pmplayer-window" title="PMPlayer" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" fullscreenbutton="true" disablefastfind="true" onunload="PMPlayer.Launch.closeWindow()" >
		<script type="application/x-javascript" src="youtubeplayer.js" />
		<script type="application/x-javascript" src="launch.js" />
		<vbox>
				<iframe id="pmplayer-iframe" type="content"/>
				<hbox>
						<button id="pmplayer-playpause"/>
				</hbox>
		</vbox>
</window>

How do I get the reference to the iframe to set it?
I've confirmed that I can load the video if I simply hardcode it, for example setting the iframe src to

Code: Select all

https://www.youtube.com/embed/VIDEOID?enablejsapi=1&modestbranding=1

so it does work. My extension runs a web progress listener to detect if a youtube link was loaded, and makes a button and menu option visible if that's the case. The button/menu will launch a new XUL window with an iframe that has the video embedded in it.

This is to be an overlay version of the Jetpack based 'Youtube Video Player Pop Out' from CAA with a few additional features (support for a few other video sites as well) and enhancements.

[vannilla]

eMatrix uses an iframe for its popup panel and the src attribute cycles popup.html (when open) and about:blank (when closed.)
However the iframe is generated dynamically with createElement when the window is ready; maybe you can do the same.
Also, what happens if you move the scripts after you declare the vbox? Can you access the frame?

[JustOff]

1. Perhaps you should include document in the reference, i.e.:

Code: Select all

pmplayerwindowref.document.frames[0].setAttribute('src',PMPlayer.Launch.playerIframeSrc);

2. You will also likely have to wait until window-youtube.xul is ready, i.e.

Code: Select all

if (pmplayerwindowref.document.readyState=="complete") {...}

or use the onload script in the xul window to tell the main routine that the player window is ready.

[moonbat]

Also, what happens if you move the scripts after you declare the vbox? Can you access the frame?

Perhaps you should include document in the reference, i.e.:

Code: Select all

pmplayerwindowref.document.frames[0].setAttribute('src',PMPlayer.Launch.playerIframeSrc);

Tried both of these, didn't work
For the readyState change, I tried -

Code: Select all

		pmplayerwindowref.document.onreadystatechange = function () {
		    if(pmplayerwindowref.document.readyState=="complete"){
			PMPlayer.Debug.log('document loading complete');
			pmplayerwindowref.document.frames[0].setAttribute('src',PMPlayer.Launch.playerIframeSrc);
		    }
		}

but it isn't being invoked.

[New Tobin Paradigm]

You shouldn't be using an iframe anyway as that has security issues when opening websites. You SHOULD be using a browser element so that it is isolated from a privileged chrome document.

https://developer.mozilla.org/en-US/doc ... XUL/iframe

[moonbat]

But can I just embed the video and nothing else in a browser element, or is it only for rendering webpages? Setting type=content in iframe is supposed to prevent the remote page from accessing chrome.

[New Tobin Paradigm]

This area hasn't been of prime concern for Mozilla to care about for over 10 years. I think it is better to just be on the safe side and use a browser element that way you can tie into navigational events and even control navigation using well established methods. Which seem to be a good fit for what you are wanting to achieve. Also be able to manage the content click events and context menu.

Didn't I tell you this like several months ago or am I imagining it.

[moonbat]

Didn't I tell you this like several months ago or am I imagining it.

Yes, you did, now that you mentioned it. Damn. I had gotten busy with other things and recently returned to this - completely forgot about what you'd said. I'll give this approach a try.

[Moonchild]

You shouldn't be using an iframe anyway as that has security issues when opening websites.

Remember what I posted here: viewtopic.php?f=5&t=23025&p=175707#p175704
Don't load any remote content you don't control directly in a Chrome window. Using an iframe is doing just that; embedding a browser component properly sandboxes it.

[moonbat]

Ok, I'm trying it with a browser now, but same problem as before - how do I manipulate it from my script? window.content and window.document both return null, and getElementByID() is not a part of the window object.

[New Tobin Paradigm]

You would likely need to inject your scripting into the browser content like any other content manipulation extension.

[moonbat]

I don't want to manipulate content - just want to set the URL for the browser component to the Youtube video to be played. I was looking at something similar to window.getElementbyID(browser).setAttribute(src,my youtube link).

[New Tobin Paradigm]

That isn't how you use a browser element.

https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/browser

[Moonchild]

You'd want to use loadURI

[moonbat]

I'm unable to even get the reference to the browser object, let alone call any methods on it.

Changed the iframe tag to

Code: Select all

<browser id="pmplayer-browser" type="content-primary"/>

but after saving the reference to the XUL window from the window.open() call - I'm flummoxed as to what next. Have tried type=content as well for the browser.

To recap, I have

Code: Select all

pmplayerwindowref = window.open("chrome://pmplayer/content/window-youtube.xul", "pmplayerwindow",
				  "chrome,width=640,height=480,resizable=yes,dialog, alwaysRaised,centerscreen")

and after this, pmplayerwindowref.getElementbyID() is not a valid call, and both .document and .content are null, so now how do I access the pmplayer-browser contained within?

[moonbat]

Back to developing this using the experience gained from porting Pure URL to XUL

Wasn't sure if I wanted to start a new thread for essentially the same problem, but using a <browser> element as suggested. I've figured out how to access the browser element directly in the new window.

This is the popup window - (commented out the button display for now, I'm also facing layout issues with the below)

Code: Select all

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<?xml-stylesheet type="text/css" href="chrome://myext/skin/overlay.css"?>
<!DOCTYPE window SYSTEM "chrome://myext/locale/myext.dtd" >
<window
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	xmlns:html="http://www.w3.org/1999/xhtml" fullscreenbutton="true"
	disablefastfind="true" id="myext-window" title="myext">
	<script type="application/x-javascript"
		src="chrome://myext/content/windowscript.js" />
	<groupbox>
		<grid flex="1">
			<columns>
				<column flex="1" />
			</columns>
			<rows>
				<row>
					<browser id="myext-browser" type="content"  flex="1"/>
				</row>
<!-- 				<row>
					<hbox>
						<button id="myext-playpause" />
					</hbox>
				</row>
 -->			</rows>
		</grid>
	</groupbox>
</window>

and this is windowscript.js referenced above -

Code: Select all

var embed = null;
myext = {
		init:function(){
			globals.mycommand.setAttribute("disabled","true");
			embed=document.getElementById("myext-browser");
			console.log("Initial URL Is "+embed.currentURI.spec);
//			embed.src=globals.frameEmbed;
			console.log("frameEmbed is"+globals.frameEmbed);
			embed.loadURI(globals.frameEmbed);
			console.log("Current URL Is "+embed.currentURI.spec);
		},
		closeWindow:function(){
			globals.mycommand.removeAttribute("disabled");
		}
}
window.addEventListener("load", myext.init,false);

Even after setting the URI, the console output shows

Code: Select all

Initial URL Is about:blank  

frameEmbed is https://www.youtube.com/embed/e94Hcfc--jw?enablejsapi=1&modestbranding=1  

Current URL Is about:blank

Why doesn't the browser load the embed? I have also tried setting the src property (commented out in above code), with the same result, and replaced the browser with an iframe - in the latter case the src is set correctly but it doesn't load.