iFrame src

[rTankersley]

Hey all,

My application needs users to be able to enter in web links they would like to store. I was asked to put an iFrame in the bottom half of the panel that allows users to store web links, to help the user find useful links. Problem is, the iframe (how I did it, at least), does not have an address bar at the top of it, and I cannot figure out how to either get an address bar or get the current link it is at. The code I have:


xtype: 'panel',
anchor: '100% 100%',
id: 'fakeId',
layout: 'fit',
items: [{
title: "iframe",
layout: 'fit',
items: [{
xtype: 'component',
autoEl: {
tag: 'iframe',
src: 'http://...'
}
}]
}]


Do you know of any way to solve my problem? Either a way to get an address bar or a way to get the current 'src.' If you know of a way to add a listener for everytime the iFrame changes, that would be great, too, but not necessary.

Thank you

[mitchellsimoens]

The iframe won't get an address bar... you would need to use container, add in a textfield and a component with the iframe and use the textfield as the address bar.

[rTankersley]

Yes, I would like to do that. However, the problem is I do not know how to put the web address into the textfield. I need a listener for when the web address changes, and I need the web address, but I do not know how to get either of those from the iframe. Would you be able to help me out with that problem?

Thank you for your response.

[lorezyra]

Just like mitchellsimoens stated... create a panel/ container with your TriggerField and another container with the property "html: '<iframe id=webBox></iframe>"

Then, config your TriggerField with the property "enableKeyEvents:true" and create your keyup function to respond to the ENTER key...

You can create an event to listen for mousedown within your container of the webBox. The mousedown event would trigger the function to read the location.href of webBox. Then you can populate the triggerField with your href (URL).

[rTankersley]

Sorry, I'm sure I'm displaying my immense ignorance here, but I still don't know how to get the href. So, you gave it an id webBox. How do I get ahold of that id to get its href attribute?

Thanks again.

[lorezyra]

I take it that you are new to JavaScript as well...

You would reference the DOM object "old school..."


var webIFrame = document.getElementById('webBox');
//change the src of the iFrame...
webIFrame.location.href = "http://google.com/";

[rTankersley]

I cannot get it to work!

Here's the iFrame:

xtype: 'panel',
title: "iframe",
layout: 'fit',
items: [{
xtype: 'container',
html: '<iframe id=webBox src="http://www.google.com"></iframe>'
}]

It shows up in the panel, half the width and half the height, and it's an empty white box. Google doesn't show up.

Here's a listener code for when I push a button:


var webIFrame = document.getElementById('webBox');
console.log(webIFrame);
webIFrame.location.href = "http://google.com/";

It says location is undefinded. console shows this: <iframe id="webBox" src="http://www.google.com">

Thank you for working through this with me. I may have to cite you for writing the code after all is said and done.