I have an iframe, without any src specified.
I change the content dynamically with javascript using this code:
let doc = Paste.render_iframe.contentWindow.document
doc.open()
doc.write(Paste.get_value())
doc.close()
Which works. But the only problem is that if some javascript was used before, it stays inside the window object, and redefining them again causes errors.
I haven't found a way to reset/replace the iframe's window object.
What I did before was create a new iframe and replace the old one.
I could also try to change the src and then change the content.
The problem with those is that, 1) replacing iframes very often seems expensive, 2) I would have to deal with race conditions, having to check when iframe is fully loaded to accept new content.
So my question is, is there a way to replace or reset the iframe's window object without replacing it or modifying the src?
Guess I'm going to try changing the src dynamically and waiting for the load event to change the content.
Paste.setup_render = function()
{
Paste.render_iframe.addEventListener("load", function()
{
if(Paste.render_mode)
{
Paste.do_render()
}
})
}
Paste.reset_render_iframe = function()
{
Paste.render_iframe.src = `about:blank?t=${Date.now()}_${Paste.get_random_string(4)}`
}
Paste.render = function()
{
Paste.reset_render_iframe()
}
Paste.do_render = function()
{
let doc = Paste.render_iframe.contentWindow.document
doc.open()
doc.write(Paste.get_value())
doc.close()
}
Related
I need the same source i can find in the Elements window of DevTool console in my extension. I tried using the content script
var text = document.documentElement.innerHTML;
injected after catched the "complete" status from chrome.tabs.onUpdated.addListener, but i recived only the html code without the content dynamically created.
In particular i want my extension to find all "div" added dynamically.
Any help will be appreciated!
The complete event fires once the initial page content has been loaded. It has no relation to dynamically generated content, otherwise it would have to wait indefinitely, since more content may always be added later.
If you are interested in a specific element, you can use setTimeout to periodically poll for the element. Like so:
function getElement() {
return new Promise(function(res, rej) {
var interval = setInterval(function() {
var elm = document.getElementById('the-element-you-want');
if(elm){
clearInterval(interval);
res(elm);
}
}, 10);
});
}
Another option would be to use a MutationObserver to detect when the desired element(s) have been created.
I have this js code I searched on auto-resizing iframe height with its content. It does what the user who posted this says it does. However, I now have this problem with dynamic content within the iframe.
The js code I have works only with the regular content of the page but not when there are dynamic changes going on within. For example, displaying texts through ajax call.
I've tried searching for other solutions to this but others did not work as well as what this code can do.
I'm hoping that there's someone who could help me update the code to meet what I currently need. I'm not very familiar with jquery/javascript to do this on my own. Thank you in advance! :)
This is the JS code:
function setIframeHeight(iframeId) {
var ifDoc, ifRef = document.getElementById(iframeId);
try {
ifDoc = ifRef.contentWindow.document.documentElement;
} catch (e) {
try {
ifDoc = ifRef.contentDocument.documentElement;
} catch (ee) {}
}
if (ifDoc) {
ifRef.height = 1;
ifRef.height = ifDoc.scrollHeight;
/* For width resize, enable below. */
//ifRef.width = 1;
//ifRef.width = ifDoc.scrollWidth;
}
}
I found this other code which enables iframe adapting to its dynamic content but I do not know how to make the code above and this work together. Please help me.
var iframe = document.getElementById("ifr").contentWindow;
iframe.$(".toggle_div").bind("change", function () {
$("#ifr").css({
height: iframe.$("body").outerHeight()
});
});
To summarize, I need a code that autoresizes iframe with its content and will autoresize again if there are changes on the size of the content.
The problem is that your page doesn't have any trigger indicating to resize when the iframe body resizes.
There also (as far as I know) isn't anything built into javascript that lets you watch for changes in an elements height.
You have two options.
If you are the owner of the iframe content, you can put a script in that page which can call to it's parent window telling the parent to run your resize script, or you can run a function which checks for changes say every second or so.
For the first method, you can follow the answer from here Can events fired from an iframe be handled by elements in its parent?
Otherwise just do a
setTimeout(function(){
$("#ifr").css({
height: iframe.$("body").outerHeight()
});
},1000);
function adjustMyFrameHeight()
{
var frame = getElement("myFrame");
var frameDoc = getIFrameDocument("myFrame");
frame.height = frameDoc.body.offsetHeight;
}
call this method on your iframe onload event and replace mtFrame to your iframe Id
I want to access the currently loaded document of an iframe and link that document to another iframe, for this I tried:
$("#if1").attr("src", $("#if2").attr("src"));
But this loads the document again. I want to access the document already loaded in #if1. How can I do this?
$("#if1").attr("src", $("#if2").attr("src"));
But this loads the document again.
Err, yeah, that's what you are doing: you are setting if1's src to if2's src. That's why it reloads the iFrame... If you exchange if1 and if2 in your code it might do what you're trying to do -- if I managed to understand you.
Check out this running demo: http://jsfiddle.net/aymansafadi/BanTV/5/show/
The key part you might be interested is:
$('#swap').on('click', function() {
var iframe1 = $('#if1')[0].contentWindow.location.href;
var iframe2 = $('#if2')[0].contentWindow.location.href;
$('#if1')[0].contentWindow.location.href = iframe2;
$('#if2')[0].contentWindow.location.href = iframe1;
});
NOTE: This, and anything else you you try, will only work if both iframes are under the same domain as the parent window.
You can also use .src('attr') to set the URL, but not get the current URL.Demo: http://jsfiddle.net/aymansafadi/BanTV/7/show/
$('#swap').on('click', function() {
var iframe1 = $('#if1')[0].contentWindow.location.href;
var iframe2 = $('#if2')[0].contentWindow.location.href;
$('#if1').attr('src', iframe2);
$('#if2').attr('src', iframe1);
});
I have a <div> being dynamically created, and it contains an <iframe>. The <iframe> may close itself, at which point the <div> is removed.
So far I have:
var div = document.createElement('div'), ifr = document.createElement('iframe');
// some styles and stuff here, including ifr.src
ifr.contentWindow.container = div; // Note that domains are the same
// within the iframe's code, possibly a "close" link or after completing an operation
container.parentNode.removeChild(container);
It works. But only if the page within the iframe is the one that was there to start with. If a link is clicked to another page, window.container is no longer defined.
I know I can use window.name to store data persistent to a window, but that it limited to data that can be serialised. To my knowledge, you can't serialise a DOM node, other than by assigning it an ID and storing that. I would like to avoid such arbitrary IDs, so if anyone can suggest a better solution I would be very grateful.
Use this code:
//At the frame:
var parentFrames = parent.document.getElementsByTagName("iframe");
for(var i=parentFrames.length-1; i>=0; i--){
if(parentFrames[i].contentWindow == window) {
parentFrames[i].parentNode.removeChild(parentFrames[i]); //Removes frame
//Add an extra `.parent` at each side of the expression to remove the `div`.
break;
}
}
Pages loaded into your <iframe> can use "window.parent" to get to the containing page. Thus, instead of keeping some "magic" reference in the <iframe>, keep it on the containing page and have the "child" pages look for it.
function closeMe() { // inside the iframe page
window.parent.frameContainer.removeChild(window.parent.removableFrame);
}
In addition to "parent", the "top" property of "window" references the top-most context when there's a chain of windows (frames) longer than just one step (so, an <iframe> in an <iframe> etc).
I have a Firefox extension that detects whenever a page loads in the browser and returns its window and document. I want to attach some events (that launch functions in my addon's overlay) to elements in the page, but I don't know how to do this in a way that's safe.
Here's a code sample:
var myExt = {
onInit: function(){
var appcontent = document.getElementById("appcontent");
if(appcontent){
appcontent.addEventListener("DOMContentLoaded", this.onPageLoad, true);
}
},
onPageLoad: function(e){
var doc = e.originalTarget;
var win = doc.defaultView;
doc.getElementById("search").focus = function(){
/* ... 'Some privelliged code here' - unsafe? ... */
};
}
};
So can anyone tell me what's the safe way to add these events/interact with the page's DOM?
Thanks in advance!
I think that you want to listen to the focus event, not replace the focus() function:
doc.getElementById("search").addEventListener("focus", function(event)
{
if (!event.isTrusted)
return;
...
}, false);
Usually, there is fairly little that can go wrong here because you are not accessing the page directly - there is already a security layer (which is also why replacing the focus() method will have no effect). You can also make sure that you only act on "real" events and not events that have been generated by the webpage, you check event.isTrusted for that like in the example code. But as long as you don't unwrap objects or run code that you got from the website, you should be safe.