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!
Related
I want to get the page in which my iframe is loaded.
However my iframe is sometimes loaded inside an iframe which itself is loaded inside another iframe.
like this:
<html>
<body>
<iframe src="site_a">
<html>
<body>
<iframe src="mysite"></iframe>
</body>
</html>
</iframe>
</body>
</html>
If in the head of "mysite" I try window.top.location.href I get cross-origin errors.
<script>
(function(){
var url = window.top.location.href;
console.log(url);
})();
</script>
gives
Uncaught DOMException: Blocked a frame with origin "mysite" from accessing a cross-origin frame.
How could I get the actual url in the browser bar so I can see on which pages someone loads my iframe?
How could I get the actual url in the browser bar so I can see on which pages someone loads my iframe?
You can't.
I get cross-origin errors.
And that is why.
Your JavaScript is not allowed to monitor what people do on other websites, even if those other websites put your page in a frame.
I want to be able to get the complete source code from a webpage, I tried the method mentioned here
It does not grab all the source code for the page I want the code from.
The page got several iframes each with a "virtual tag" #document and everything after that tag I can not get.
If I just right-click the page in Chrome and select view-source the code after the #document is not visible there either. However, if I inspect the page using Chrome I can see all the source code after the #document tag too.
I looked at this post on SO but it does not help me either. I can actually see the first part of the code in the iframes, just nothing after the #document. It looks structually like this:
<iframe class="xxxxx" frameborder="0" scrolling="no" srcdoc="<html
<base target="_parent">
<head>
<style> body { display: none; } </style>
</head>
<body>
<style> </style>
</body>
</html>">
#document
<!-- code I can not reach -->
<html><head></head><body>...</body></html>
</iframe>
I tried to iterate through all the iframes in DOM using javascript but then I just get a security error which from what I read can not be worked around:
SecurityError: Blocked a frame with origin "http://www.google.com" from accessing a cross-origin frame.
Is there a way to do what I want? I mean, Chrome can see this source code through the Inspect function so it must be possible in some way.
Is it possible to execute JavaScript in either a preload script or manually targeting an iframe in a webview /The webview is based on chrome , my intuition says it should be possible.
Basically I would like to click a button inside the iframe using:
document.querySelector('button selector').click();
The page looks something like this. (The page is loaded in the webview)
<html>
<body>
<iframe>
<button id="foo">Click</button>
<iframe>
</body>
</html>
I am building an chrome extension where I am injecting my script.js file in all the iFrames of the web-page via content script file. Looping through all the iFrames in the web-page and injecting my script.js file in the head section.
My content script file contains following code:
var $iframe = $('#iframe');
$iframe.ready(function() {
$iframe.contents().find("head")
.append("<script src='chrome://ext3241241234/script.js'/>");
});
My script.js file contains following code:
var html = "<div id='cksBox'></div>"
$('body').append(html);
script.js simply insert a div element in the body. Thus I am expecting all iFrames' body will have this div element in the end.
But this is not happening. Instead of that my main/parent body element have this div element rather than inside iFrame body. Say following is web-page where my chrome extension is loaded:
<html>
<body>
<div id='cksBox'></div>
<iframe>
<html>
<head>
<script src='chrome://ext3241241234/script.js'/>
</head>
<body/>
</html>
<iframe>
</body>
I can see that my script.js file is loaded inside the iFrame. I tried debugging this, inside script.js file, when I query document, it returns document of parent/main html rather than of iFrame. I do not understand when my script.js file is executed its context should be of iframe but it is of document of main/parent web page.
Hope I am clear with my problem here.
Can someone help?
Please let me know if any more information is needed.
You should directly use script.js rather than chrome-extension prefix.
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.