iFrames in p5 DOM

Robbert

Hi guys,

just checking out the possibility of putting an iFrame in the html through the p5 DOM library. I've only written this so far just to test it out. The iFrame works, but does not load the url. (neither in the p5 IDE or loaded in the browser). Any suggestions?

var frame;

function setup() {
  createCanvas(windowWidth,windowHeight);

  frame = createElement("iframe","www.google.nl");
}
function draw() {
  frame.position(mouseX,mouseY);
}

blindfish

The second parameter of the createElement method is the content of the specified tag; and in this case not the src attribute. When you do figure out how to set the attribute you also need to include the http:// in the url ;)

jrmasiero

Hi Robert. Did you find the answer?

blindfish

@jrmasiero - the answer is there in my original answer: iframe determines its source from the src attribute and not the content of the tag itself (that's just displayed if iframe isn't supported). So if you use createElement you then need to set the src attribute to the URL of the intended content. All you need for that is in the reference ;)

jeremydouglass

@blindfish --

Are you saying that createElement() has a page in the p5.js reference?

Or are you saying that the public references for HTML createElement documents a src attribute?

I'm not sure that new users will be able to understand your hints, as the reference materials you seem to be indicating aren't directly present under those names....

Perhaps instead we should recommend a createElement tutorial...?

GoToLoop

https://forum.Processing.org/two/discussions/tagged/iframe

blindfish

Are you saying that createElement() has a page in the p5.js reference?

@jeremydouglass: It does: createElement - though yes, it is part of the DOM library...

I'm not sure that new users will be able to understand your hints

Users performing necromancy shouldn't expect much more than hints...

blindfish

Or are you saying that the public references for HTML createElement documents a src attribute?

I think I was fairly clear why the src attribute is relevant in my original and second answer: it's what determines the external content to be rendered in the iframe; which is what the OP was interested in doing.

you then need to set the src attribute to the URL of the intended content. All you need for that is in the reference

As in: setting an attribute is a documented feature - go look for it ;)

GoToLoop

1. http://p5js.org/reference/#/p5/createElement
2. http://p5js.org/reference/#/p5.Element/attribute

jeremydouglass

Cheers for the link, @blindfish, @GoToLoop. The createElement entry isn't listed on the p5.js reference page, or cross-listed from Element -- so if they don't use the p5 API search box they won't find it.

GoToLoop

... entry isn't listed on the p5.js reference page, or cross-listed from p5.Element.

http://p5js.org/libraries/ -> http://p5js.org/reference/#/libraries/p5.dom
http://p5js.org/reference/#/p5.Element