We have a web page, room.html, with table onclick = function place():
function place()
var x = document.createElement("IFRAME");
x.setAttribute("src", "loading.html");
document.body.appendChild(x);
}
How do we close the iframe with a button in the page loading.html?
you can just remove it directly using jQuery
$('iframe').remove();
Related
I have an image gallery on my site and when you click on it, it opens into a lightbox kind of effect.
I want them to be able to click off of the preview image on the lightbox background and close the preview but not if they click on the actual preview image itself.
function get_image_preview(){
var lightbox = document.getElementById("lightbox");
var image_src = document.getElementById("gallery_image").src;
lightbox.style.display = "block";
lightbox.setAttribute("onclick", "end_image_preview()");
var new_image = document.createElement("img");
new_image.setAttribute("id", "preview_image");
new_image.setAttribute("src", image_src);
new_image.setAttribute("onclick", "return false");
lightbox.appendChild(new_image);
}
function end_image_preview(){
var lightbox = document.getElementById("lightbox");
lightbox.style.display = "none";
lightbox.innerHTML = "";
}
So basically this line:
lightbox.setAttribute("onclick", "end_image_preview()");
does what it is supposed to do and close the preview.
However, the preview is a child of this and I want them to be able to click on the image without ending the preview, so I tried this:
new_image.setAttribute("onclick", "return false");
I think you mignt want to use event.stopPropagation():
function new_image_click(e) {
e.stopPropagation();
}
new_image.setAttribute("onclick", "new_image_click(event)");
in your end image preview click listener make sure that the element does not have in its ancestor the preview element it self, lets say that you gave the preview element the id "preview"
in end_image_preview
function end_image_preview(e) {
if (e.closest('#preview')) {
return
}
// here do what you already doing
}
I am setting up a website and what I need is for when a button is clicked it changes the link in the iframe so it goes to another website. Here is what I got so far:
<script>
var id = 'http://www.aWebsite.com';
function link(){
id = 'http://www.aSecondWebsite.com'
}
</script>
<script>
document.writeln('<iframe name="heel"src="' + id + '" height="300" width="700"> </iframe>');
</script>
<button onclick="link()">Click Me</button>
I am not sure why when the button is clicked the id variable isn't changed?
Actually the value of id is changed, but document.writeln() is not in the link function, hence it's not executed.
A quick-fix would be to move the document.writeln() into link(), but that would be a disastrous fix. document.write(ln)() wipes out everything in the document, and creates a new one, when used after the page has been parsed. You need to do something like this:
function link() {
id = 'http://www.example.org';
document.getElementById('heel').src = id;
}
Then add your iframe element to a HTML, and remove the whole script with document.writeln().
<iframe id="heel" name="heel" src="http://www.example.com" height="300" width="700"></iframe>
EDIT
If you want to create a new iframe element, you can do it like this:
function link() {
var frame = document.createElement('iframe'); // creates an iframe element
id = 'http://www.example.org';
frame.width = '700px'; // sets the width for the new iframe
frame.height = '300px'; // sets the height for the new iframe
frame.name = 'heel2'; // sets the name for the new iframe
frame.src = id; // sets the src for the new iframe
document.body.appendChild(frame); // appends the new iframe to body as a last element
}
hi i am trying to get inner HTML of iframe element
my html document a structure is like this
<body>
<div>
<iframe id="frame1">
<html>
<button id="mybutton">click me</button>
</html>
</iframe>
</div>
</body>
i am creating a chrome extension i have to show an alert when button with id mybutton is clicked i write an a content script
var greeting = "hola, ";
document.body.innerHTML='<div><iframe id="frame1" src="http://onemoredemo.appspot.com/"></iframe></div>' ;
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document
var button = iframeDocument.getElementById("mybutton") ;
if(button ==null)
alert("button is null") ;
i installed this extension in chrome when i visit a page then document body is changed into an iframe with a button in it.
but i am facing an alert which has button is null but there is button in iframe why i am getting null for this button??
To get the button inside of the iframe, this could work:
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var button = iframeDocument.getElementById("mybutton");
Obviously, you can navigate to get what you want with iframeDocument, and use .innerHTML as you seem to know. You cannot get the contents of the iframe if the iframe is pointing to a domain other than its parent.
UPDATE:
You need to use the code to get the frame's document and its contents after it's ready, so you should use something like this:
window.onload = function () {
var greeting = "hola, ";
var div1 = document.createElement("div");
var frame1 = document.createElement("iframe");
frame1.id = "frame1";
frame1.onload = function () {
alert("loaded");
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var button = iframeDocument.getElementById("mybutton");
if (button == null) {
alert("button is null");
}
};
frame1.src = "http://onemoredemo.appspot.com";
div1.appendChild(frame1);
document.body.appendChild(div1);
};
DEMO: http://jsfiddle.net/nqTnz/
The important thing is how the elements are created and appended to the DOM - not just using innerHTML. The onload method of the iframe is to guarantee it's ready. The actual manipulation code won't work in the jsFiddle because the cross-domain problems, but is what you should need.
In jQuery's source code the solution to get the iframe document is like this:
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
And then you can usually use getElementsByTagName or getElementById to select the DOM-Elements:
var elem;
if (iframeDocument) {
elem = iframeDocument.getElementById('mybutton');
}
Have You tried ????
iframe.srcdoc="<HTML><a id='some_id'>old</a><script>function run(src){eval(src);}</script></HTML>";
And then
iframe.contentWindow.run("document.getElementById('some_id').innerHTML='new content';");
I am using the following to load an iframe from a bookmarklet:
javascript:(function(d){
var%20modal=document.createElement('iframe');
modal.setAttribute('src','http://myurl.com/page.html?url=
'+encodeURIComponent(window.location.href)+'&
page_title='+document.title);
modal.setAttribute('scrolling','no');
modal.className='modal';
document.body.appendChild(modal);
var c=document.createElement('link');
c.type='text/css';
c.rel='stylesheet';
c.href='//myurl.com/css/wl_iframe.css';
document.body.appendChild(c);
}(document));
and to close it I am trying:
<button onclick="parent.$.iframe.close();">X Close Window</button>
I've also tried:
<button onclick="modal.$.iframe.close();">X Close Window</button>
But they are not working, they do nothing.
I know I can use:
X Close Window
But this then causes a the browser to re-refresh the page they were looking at and also the user has to press the back button twice to get to the page before which is not ideal.
Any ideas?
you should add some name or id to your iframe
javascript:(function(d){
var modal=document.createElement('iframe');
modal.setAttribute('src','http://myurl.com/page.html?url='+encodeURIComponent(window.location.href)+'&page_title='+document.title);
modal.setAttribute('scrolling','no');
modal.setAttribute('name', 'my_modal_window');
modal.className='modal';
document.body.appendChild(modal);
var c=document.createElement('link');
c.type='text/css';
c.rel='stylesheet';
c.href='//myurl.com/css/wl_iframe.css';
document.body.appendChild(c);
}(document));
And then
X close window
EDIT
working solution, have just tested on stackoverflow inside Chrome JS console:
(function(d){
var modal=document.createElement('iframe');
modal.setAttribute('src','http://myurl.com/page.html?url='+encodeURIComponent(window.location.href)+'&page_title='+document.title);
modal.setAttribute('scrolling','no');
modal.setAttribute('name', 'my_modal_window');
modal.className='modal';
document.body.appendChild(modal);
var c=document.createElement('link');
c.type='text/css';
c.rel='stylesheet';
c.href='/css/wl_iframe.css';
document.body.appendChild(c);
var a = document.createElement('a');
a.onclick= function(){
var modals = document.getElementsByName('my_modal_window'),i = modals.length;
while (i--) {
modals[i].parentNode.removeChild(modals[i]);
}
};
a.innerHTML = 'Close Iframes';
document.body.appendChild(a);
}(document))
I forgot to include 'run multiple times in one page' on my last question located here: Create iframe with javascript appending to a div
I need to run the code on multiple div's within the same page. Right now the code below only runs once on the last div. For example if I have 3 div's, all 3 should have an iframe appended to it. Regular javascript. Trying not to use JQuery.
window.onload = function(){
var link = "http://www.somesite.com"
var iframe = document.createElement('iframe');
iframe.frameBorder=0;
iframe.width="300px";
iframe.height="250px";
iframe.id="randomid";
iframe.setAttribute("src", link);
document.getElementById("ad54").appendChild(iframe); //<--this id will be dynamically generated to match div's
}
<div class="ad" id="1"></div>
<div class="ad" id="2"></div>
<div class="ad" id="3"></div>
EDIT: Tested in IE9, Chrome, Safari, Firefox and opera. This code works. No JQuery or loops needed. This code will create the iframe wherever you use it.
var link = "http://www.somesite.com"
document.write(iframe);
var myIframe = parent.document.getElementById("randomid");
myIframe.height = 250;
myIframe.width = 300;
myIframe.src = link;
myIframe.style.border = "0px";
myIframe.style.padding = "0px";
window.onload = function() {
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
append_iframe( elements[i] );
}
}
function append_iframe( div ) {
var link = "http://www.somesite.com"
var iframe = document.createElement('iframe');
iframe.frameBorder=0;
iframe.width="300px";
iframe.height="250px";
iframe.id="randomid";
iframe.setAttribute("src", link);
div.appendChild(iframe);
}
Not a jQuery guy but I think this works
$("div").each(function(d) {
var link = "http://www.somesite.com"
var iframe = document.createElement('iframe');
iframe.frameBorder=0;
iframe.width="300px";
iframe.height="250px";
iframe.id="randomid";
iframe.setAttribute("src", link);
this.appendChild(iframe);
});