I have this in my popup.html
<!DOCTYPE html>
<html>
<body>
<button id="button">Starting Now</button>
<script src="jquery-2.1.4.min.js" type='text/javascript'></script>
<script src="popup.js" type='text/javascript'></script>
</body>
</html>
This is my popup.js so far...
function dothis(){
/* ??? */
};
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('button').addEventListener('click', dothis);
});
I want to inject a bit of html code into the web page on button click; I've already included it in my manifest. How do I do this? Sorry, I'm new to this! I've looked around on stack overflow, but I could really understand any of the answers. Thanks in advance!
You need a Content Script in order to interact with the page. You can send a message from the popup to the content script with Messaging, then the content script can do the actual interaction with the page.
Related
I am using Google Chrome Version 81.0.4044.138.
When I try to open/refresh the html file I have with the following code, the page content does not appear until I click the OK button on the alert dialog. How can I fix this so that the content and the dialog are shown?
I have tried this on MS Edge as well with the same issue...
Any assistance greatly appreciated!
<!doctype html>
<html>
<head>
<title>Javascript</title>
</head>
<body>
<p>Hello World!</p>
<script type="text/javascript">
alert("Hello, World!");
</script>
</body>
</html>
Alert freezes the page by design. You could try modifying your code a bit:
<script type="text/javascript">
window.addEventListener('load', () => {
alert("Hello, World!");
});
</script>
I want to place a comment box on my website.
This is the code for installation of the plugin:
<script src="https://unpkg.com/commentbox.io/dist/commentBox.min.js"></script>
which I have already placed inside the head section on my website. No problem here.
Then we have to initialize this code:
import commentBox from 'commentbox.io';
commentBox('my-project-id');
I am not able to figure this out how and where to add the above initialization code on my website? I tried adding in the head but nothing happened (I already know that I have to place the project id, even with project id it's not showing)!
Like this
You will need some kind of setup too since here at SO there are some restrictions
<!doctype html>
<html>
<head>
<title>Comments</title>
<script src="https://unpkg.com/commentbox.io/dist/commentBox.min.js"></script>
<script>
window.addEventListener("load",function() {
commentBox('my-project-id');
});
</script>
</head>
<body>
<div class="commentbox"></div>
</body>
</html>
this is a very odd problem indeed and I hope it's simple. I cannot get a simple select and append to work in my html document, but it works when I'm in the chrome browser console.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="/js/script.js"></script>
<script>
$('[data-js="works"]').append("hello");
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>
When I put that line of script in the console, hello appears above test. When I just open the page, test is there alone. I was running a script from this page earlier and when I tried to select an element it didn't work. I then went to inline script to see if it would even work there, no. I've seen if it works from inline script without the imported script, also no. Console has no bug information. I can print from that inline script to my console if I want, but this code still isn't running properly.
Doesn't work with my local httpserver and doesn't work just as a locally opened file.
This is because the script is executed before the page is loaded so the target div does not exist yet.
The solution is to wait for the page to be fully loaded before doing something.
The $ function can be used for this. Give it a callback and it will be executed once the page is loaded.
You can also use window.addEventListener("load", callback); that doesn't need jQuery.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script>
$(function(){
$('[data-js=works]').append("hello");
});
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>
Another solution can be to insert your script at the end of the page. It is not as neat though in my opinion.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
</head>
<body>
<div data-js="works"></div>
test
<script>
$('[data-js=works]').append("hello");
</script>
</body>
</html>
Try the following, hope it will solve your problem
(function($) { // This will solve namespace problem (if any)
// Write your JQuery code here
})(jQuery);
Either you put the .js file at the end of the body or put your JS code between $(document).ready(function(){ //code inside })
in HTML hyperlink, is there any way to show the second page contents in the first page?
Example:
FirstPage:
image1 image2
<div> show image on first page here </div>
Thank you very much
<iframe src="page.html" id="page"></iframe
Open new.html in an iframe
You can use an iFrame. This will create an iframe with page.html as its source, and a link that switches it to new.html
I think you want to use frame.
I don't know why (probably because you tagged javascript), I think you're trying to make something more like this (ajax loading in a div):
<!DOCTYPE html>
<html lang="es">
<head>
<title>Hope this helps!</title>
</head>
<body>
Second Page here!
<div id="hereitgoes">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('document').ready(function(){
$("#secondpage").click(function(){
$("#hereitgoes").load("secondpage.html");
});
});
});
</script>
</body>
</html>
Remember you have to run it under a web server in order to work.
Hope it helps and that it is what you intended!
I have a script tag like
<div id='CommentBox'></div>
<script src="http://www.mywebsite.com/widget.js" type="text/javascript" />
This javascript creates a comment box. (like facebook comment box)
But when users copy/paste same exact script tag more than once Chrome and IE9 does not request 2nd, 3rd file again, because it is cached. But actually people want to use comment box more than once in the same page. How can I break browser cache and force it to download as many as people pasted in their blog?
You're doing it wrong.
If you want two or more comment boxes just call the code twice. A script include is not like a function call.
Instead of Code that you write use this code:
Main HTML File:
<html>
<head>
<script src="http://www.mywebsite.com/widget.js" type="text/javascript" />
</head>
<body>
<div id="CommentBox"></div>
<script type="text/javascript">
Func1();
</script>
</body>
</html>
widget.js File:
function FUNC1(){
alert("Hello");
}