I wan't to make a userscript that will persist with its instance even if I click on a link.
To make a script instance (ie. variables etc) persist, I need to have the page I'm broswing in iframe, which is a child of the window where script is running. And also, parents document location must be same as the inner document location - otherwise I'd have problems with same origin policy.
That said, I wan't to turn this:
<html>
<head>
...
</head>
<body>
...page contents...
</body>
</html>
into this:
<html>
<head>
...here is my userscript running...
</head>
<body>
<iframe style="width: 100%; height: 100%">
...move the whole original window here...
</iframe>
</body>
</html>
Unles a link has target="_blank/_parent/_top" all browsing activity should happen in the inner iframe, while the parent window shall not be refreshed (which would cause the script lose all variables).
One way to do that would be simply creating an iframe with same url like the url of my site:
var container = document.createElement("iframe");
container.src = window.location;
However, such approach would cause page reload as well as lose of all data (filled forms, scrolling).
So to move the window with all its contents to an iframe. Is that possible?
Perhaps you could get the contents of document.head.outerHTML and document.body.outerHTML, combine them into a string, base64 encode it, then use the result to construct a dataURL, which you then set as the iframe's src.
Though I could see recursion turning the idea into an effect similar to pointing a video camera at a screen showing it's outut.
Interesting question. Bookmarked.
Related
I've got a Chrome Extension that loads an iframe with some buttons whose functionality I want to control with a script, which I inject into that iframe. However, I can't access elements using document.getElementById(), and printing the document.body to the console says "null". Here's a minimal example:
Main content script:
var iframe = document.createElement("iframe");
iframe.src = browser.extension.getURL("login_form.html");
document.body.appendChild(iframe);
iframe HTML (login_form.html):
<html>
<head>
<script src='login_form.js' type="text/javascript"> </script>
</head>
<body>
<button id="login-button">Click me</button>
</body>
</html>
JS inserted into iframe (login_form.js)
console.log(document);
console.log(document.body);
console.log(document.getElementById("login-button"));
Here, the first call to console.log, as expected, prints the iframe's DOM. However, the following two calls return "null".
Related problems I've seen:
I know there are issues with cross-domain access and iframes, but this seems to be a different case as both the iframe and the JS are under the same domain (my extension). I've also seen other questions where the solution was to execute main content script with all_frames: true, but I think this case is different to my case because it's not the content script itself that's supposed to go into the iframe.
Thanks for any help!
I'm trying to integrate wetransfer into a website through an iframe, but I'm having a problem when the page loads, it jumps half-way down page, so it focuses on the iframe, instead of opening at the top of the page.
From what I can tell, there is a script on the wetransfer site that's telling it to jump to that section, instead starting at the top of the page. How can I get it to ignore the script by wetransfer or after the iframe's loaded to tell it to move back to the top of the page?
With jquery I tried $('html').scrollTop(0); after initiating the iframe, but it still doesn't work.
On the website I have jquery calculate the height of the user's screen and then set the header to that size, with a full background and navigation and than the iframe starts below that. So setting the position to absolute or anything along those lines, wouldn't work.
I created a very simple jsfiddle example just to show how the page opens scrolled halfway down the page. It only does this when the iframe source is wetransfer and not with any other source.
https://jsfiddle.net/dbruning22/c0s6mhkv/6/
HTML
<header>
Some Header information and navigation
</header>
<div class="main">
<iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</div>
CSS
header {
background: green;
height: 600px;
}
This worked for me:
1) You initially hide the iframe by setting the display to none:
<iframe id="bmap" src="xxx.xxxx.xxx" style="display:none;" frameborder="0">
2) Once the page has loaded, then show the iframe using jquery or javascript:
window.onload = function ()
{
$("#bmap").show();
}
This worked for me across browsers
You can put an anchor at the top of your page like this:
HTML
<header>
<a id="focus" href="#focus"></a>
Some Header information and navigation
</header>
On page load use this JS:
document.getElementById("focus").focus();
As none of the above worked for me after numerous tests, another trick, because a lot of sites now have a "scroll to top" button, especially useful if page structure cannot be easily modified (like a wordpress theme ...):
jQuery(".scroll-top-button").trigger("click");
Just forcing a click on that button ... that is really cross browser :-) (if jquery supported of course) ....
This is quite a blunt solution, but you can block all scripts from running in the iframe using the sandbox attribute.
<iframe src="https://example.com" style="width: 100%; height: 250px" sandbox>
NB: An empty value blocks all same-origin resources, including images. You might prefer sandbox="allow-same-origin".
Hi Please tell me how can we remove any div in iframe for example my code is :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe src="http://stayupdate.net" width="100%" height="800">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
I want to remove "creditline" div or its text
<div id="creditline">
<span class=".alignleft">
</span>Designed By
Real Web Maker
</div>
You can change only if you have access(file) to that page..Otherwise its not possible to change the content of other's page.And it should be.
Don't no about your requirement but..But you can do a trick.
Create a same size div,change the content according to you requirement.
and by js or jquery put it exactly over iframe div.
Is not recommended at all,and its not reliable too.
I suppose you want to add script to your page, which removes a div tag inside the iframe. This is only possible if the page shown by the iframe (http://stayupdate.net) has a provision to do that. If you can modify the inner page, then you could add an event listener, which accepts an external command to remove a tag. The outer page can then send that command using postMessage, as described here. If the outer and inner pages are in the same domain, you can use a simple function call as described here.
My Chrome extension create a tab using the API
chrome.tabs.create({
'url': other_extension_url
})
The url is the the url of another extension and looks like:
chrome-extension://ext_id_goes_here/url
I would like to change the the title of the newly created tab (document.title).
I tried to do it using content script but as far as I understand there is no way to use content script with url that looks like chrome-extension://
Is there an any other way to do that?
No, there is no way to do that, since security model will not allow you to access other extensions' pages.
The title is set by the document itself, and cannot be modified by tabs API.
Here is one way to do it.
<html>
<head>
<title>My title</title>
</head>
<body style="margin:0;padding:0;overflow:hidden;">
<iframe style="width:100%;height:100%;" src="chrome-extension://extension_id/page.html"></iframe>
</body>
</html>
Note I haven't tried it from within an extension html but it did work from a html file:// opening an extension page in the iframe.
Based on this, you can have a single "wrapper" page that receives the title and the iframe url as a url parameter and updates its DOM to change the title and iframe src.
So the scenario is that I send some data using postMessage() from an iframe that is not going to have an id attribute associated to it, and there will be more than one iframes on the page. The src URL of the iframe is a site that is hosted on another domain, thus I can't access parent and set widths and heights due to cross-domain policy.
On the host window, besides receiving the data from the iframe, I want to resize that iframe to 10x10. So my question is, what property from the received message event refers to the actual iframe, and how can I set the width and height?
The content of the iframe:
<html>
...
<body>
<script>
parent.postMessage(dataToSend,'*');
</script>
</body>
</html>
The content of the Host:
<html>
...
<body>
...
<script>
// The listener that retrieves the data from the iframe
function iFrameListener(event){
...
}
addEventListener(window,'message',iFrameListener);
</script>
</body>