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.
Related
So I made a page that utilizes some javascript and also loads a js file. However, I need to move that code to a template file. When I do so, that script tag and the file are not loaded. And I don't get any error messages during page load in the browser, the file does not exist in browser, and there are no build errors or log messages. Here are snippets of code.
The following works in my "addUser.jsp" file.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<script type="text/javascript" th:src="#{/resources/js/selectListSort.js}"></script>
</head>
<body>
...
<script th:inline="javascript">
// several event listener loaders
</script>
</body>
But when I move it to my officeAccess.jsp file, it fails to load.
In addUser.jsp, I make the call:
<div th:replace="administration/fragments/officeAccess :: officeAccess ( userForm = ${userForm} )"></div>
All the html in officeAccess is loaded as expected, just the javascript and file fail to load.
From everything I've researched, what I'm trying to do isn't possible.
Since I'm loading the template, the new code is loaded in the body and belong outside the body. Or... they're ignored when loaded via the template engine. I'm not sure which.
In any case, I'll just load the scripts in the parent page as needed for the templates (since this does work).
I am using a local HTML file with link to an external script (located in the same directory) that worked when in the file, but externally doesn't. Neither Firefox nor Chrome. Code:
<html>
<head>
<script type="text/javascript" src="docket.js"> </script>
</head>
<body onload="doFunction()"> ...
The script is in a .js file, which has (simplified):
function doFunction() ....
For one, you shouldn't include the script tags in your external js file.
Also try to move the script line at the bottom before the closing body tag.
If after removing, it still doesn't work, you should open the developer tools to get clue of what is going on.
index.html:
<!DOCTYPE html>
<head>
...
</head>
<body onload="doFunction()">
...
<script type="text/javascript" src="docket.js"></script>
</body>
</html>
docket.js:
function doFunction() {
alert("hello...");
}
Note: no script tags
As per w3school - https://www.w3schools.com/tags/tag_script.asp
The external script file cannot contain the tag.
The syntax for script tag is -
<script src="URL">
Where your URL is -
1. An absolute URL - points to another web site (like src="http://www.example.com/example.js") OR
2. A relative URL - points to a file within a web site (like src="/scripts/example.js")
Note: with HTML5, type attribute for script tag is optional.
I'd suggest to add a noscript tag just to make sure you have JS enabled in your browser.
<noscript>Your browser does not support JavaScript!</noscript>
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 have a parent jsp file with an inline iframe.
The parent jsp file incorporates a js file <script type="text/javascript" src="jquery-ui-1.8.12.min.js"></script>
However I want the iframe to use jquery-ui-1.8.17.min.js
I incorporated the below in my iframe jsp file <script type="text/javascript" src="jquery-ui-1.8.17.min.js"></script>
But this doesn't seem to work. The iframe still loads with 1.8.12 js file.
How can I force iframe to use 1.8.17 and not 1.8.12?
Changing the version in parent jsp is not an option.
At the moment I have a HTML where files can be dynamically loaded.
I am using the load() function. Within the loaded HTML file, there is an external script that I would like to execute, but it won't execute? The script will execute if I go to the HTML document directy, but not when I am using the load function.
Here is my code:
Index Page
$(".pages").load("page1.html");
page1.html
<script type="text/javascript" src="alert.js"></script>
<h1>Welcome to page one</h1>
Alert.js
alert("This page has loaded");
I can confirm the rest of page1.html appears, just the javascript file won't
Help will be appreciated guys!
Thanks
Peter