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))
Related
I have an iframe and I want to add a div to it using JavaScript. But it's not showing up. What am I doing wrong?
<html>
<body>
<iframe
id="zzz"
srcdoc="<html><h1>hello</h1><button>click </button> <button>btn 2</button></html>"
width="500"
height="500">
</iframe>
<script>
let myiframe = document.getElementById("zzz").contentWindow.document;
let mydiv = myiframe.createElement("div");
mydiv.style.background = "red";
mydiv.style.width = "300px";
myiframe.body.appendChild(mydiv);
</script>
</body>
</html>
I'm running this on my local server using VSCode live server extension and I also ran it on w3schools tryit editor too:
See, no red div here!
Edit 1:
Okay, I checked the DOM too. Still nothing here...
Chrome likes a load event - also we can use document.getElementById("zzz").contentDocument;
https://jsfiddle.net/mplungjan/ju8t6xoq/
Stacksnippets will not allow accessing the iFrame
window.addEventListener("load", function() {
let myiframeDocument = document.getElementById("zzz").contentDocument;
let mydiv = myiframeDocument.createElement("div");
mydiv.style.background = "red";
mydiv.style.width = "300px";
mydiv.style.height = "300px";
mydiv.textContent = 'bla'
myiframeDocument.body.appendChild(mydiv);
});
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();
I want to create a chrome extension to add a button to a particular page, and upon clicking that button, I want a popup to appear as shown on https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
I have used content script, I've included the css stuff from that link in a .css file, and I have a .js file for the content script that injects a button on the screen.
My button is appearing on the screen. What I want to know is, how do I get the popup as shown in the link to appear? They have used an html file in the link, but I am making changes in an already existing html page through a content script. So how do I go about it?
My .js file for content script:
var button = document.createElement("button");
//button description
var body = document.getElementsByClassName("htmlclassname")[0];
body.insertBefore(button, body.childNodes[0]);
//Button appearing properly
button.addEventListener("click", function() {
//What code do I put here to get a popup like in the link??????
});
You need to inject all the DOM for your popup, as well as the button.
You can do this in the click event for the button:
var button = document.createElement('button');
button.innerText = 'Show Popup';
button.style.position = 'relative';
document.querySelector('body').appendChild(button);
button.addEventListener('click', function(e) {
var popup = document.querySelector('#myPopup');
if (!popup) {
popup = document.createElement('div');
popup.style.visibility = 'hidden';
popup.style.width = '160px';
popup.style.backgroundColor = '#555';
popup.style.color = '#fff';
popup.style.textAlign = 'center';
popup.style.borderRadius = ' 6px';
popup.style.padding = '8px 0';
popup.style.position = 'absolute';
popup.style.zIndex = '1';
popup.style.bottom = '125%';
popup.style.left = '50%';
popup.style.marginLeft = '-80px';
popup.innerText = 'A Simple Popup!';
popup.id = 'myPopup';
button.appendChild(popup);
}
if (popup.style.visibility === 'hidden')
popup.style.visibility = 'visible';
else
popup.style.visibility = 'hidden';
});
<div>Content already in page.
<p>blah blah blah</p>
</div>
You may want to check Getting Started: Building a Chrome Extension which shows how you can implement opening a popup window after clicking an icon. As mentioned in the given link, the actual logic of rendering the content of the popup is implemented by popup.js.
Then, after you've got your first extension up and running, you can fiddle your code with things exactly how you want it like setting a tooltip on the browser action button.
Tooltips can be set by specifying the default_title key in the manifest file. Open manifest.json, and add the default_title key to the browser_action. Make sure that the JSON is valid, so quote the key and add a comma where necessary.
Sample code:
{
...
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Click here!"
},
...
}
Suggested solution in this related SO post might also help.
I have a script that runs if a button is pressed that creates a new window with a new button. I want to add a video to this page, how can I do that? This is the script that creates the page. Very new to html/javascript sorry if this is a stupid question
var w = window.open(''),
button = w.document.createElement('button');
button.innerHTML = 'Start Test';
button.addEventListener('click', function () {
w.alert('!');
});
var container = w.document.createElement('div');
container.id = 'buttonParent';
w.document.body.appendChild(container);
container.appendChild(button);
You should be able to add this to the page using HTML video tags:
http://www.w3schools.com/html/html5_video.asp
I'm trying to add some content into a page that is opened in a new tab/window, and nothing seems to be happening. Here is some of my code:
var newWindow = window.open('/Window');
newWindow.document.body.innerHTML += '<div>This is a test</div>';
Any ideas?
as you have tagged jquery:
var w = window.open();
var html = '<div>This is a test</div>';
$(w.document.body).html(html);
Demo