Google Chrome Extension Redirect different page - javascript

I have popup.html I want to load different html page in extension when user click href. Example user will enter username and password and if they are correct login.html redirect to content.
Tried this:
window.onload=function(){
$( '#Login' ).click(function() {
alert('test');
chrome.browserAction.setPopup({
popup:"login.html"
});
});
}
Login is a button.But login.html didnt show up. Alert is working.

To change the popup html page you can use
chrome.browserAction.setPopup
more detailes on this page http://developer.chrome.com/extensions/browserAction.html
you can do something like this:
in html:
<a onclick="changePopup();" href="#"> change popup</a>
in js:
function changePopup(){
chrome.browserAction.setPopup({
popup:"second_page.html"
});
}
You didn't specified where is the link placed? in the popup page or in an html page, so I assumed the linked is placed in popup html page.
If the link is placed outside extension, you should use Content Scripts https://developer.chrome.com/extensions/content_scripts.html
UPDATE: You should put the java-script file in your manifest.json using background pages or event pages depending on what you need.
Here you can find more info:
https://developer.chrome.com/extensions/background_pages.html
http://developer.chrome.com/extensions/event_pages.html
....
"background": {
"scripts": ["background.js"]
},
....
If you loaded the javscript file from your html page using the <script> tag , you should use the Message passing api : http://developer.chrome.com/extensions/messaging.html to interact with your html.

Try this
<button id="add-button">Go to another popup</button>

Related

Javascript: Load an HTML page with button click

I have a button defined in HTML.
I want to load a page background.html when this button is clicked. But I want to do it from javascript, not from inside the .html file. So on my register.js file I have below:
$(document).ready(function() {
$("#btnApply").click(function() {
window.open("background.html");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnApply" value="Register">
But this doesn't load the page. What am I missing?
<input type = "button" id = "btnApply" value = "Register" onclick="loadPage()">
then the function could be in your register.js file as :
function loadPage()
{
window.location="background.html";
}
It might be because popups are blocked on that page. All you need is to allow them (a screenshot from Chrome):
And ensure that you:
Run this code in the browser (otherwise you will not have window object)
background.html is in the same folder as your script
The open() method opens a new browser window. If you want it to load from the same window use location object.
window.location.assign("background.html");

PHP Redirect breaking iframe communication with parent

Can't seem to find anyone to figure this out. Just trying to get <iframe> BTN to talk to parent.
Simple problem, need to get a button inside an <iframe> to call function on main.html.
The setup is as follows:
main.html has <iframe> with products.php inside.
Products.php has button that loads confirmation.php
Confirmation.php has the BUTTON we need to call function on parent.
all files are on the same server/domain
The traditional method of button inside products.php changing src on main to confirmation.php works as expected.
The problem is happening here: On products.php the way it loads the confirmation page is with this:
private $base_url = "https://xxxxxxxx.com/";
$returnURL = $this->base_url . "confirmation.php";
Products page <form> submission calls this PHP. This action is somehow embedding the confirmation page, or appending it in a way it can't communicate with parent.
Button & function on confirmation.php:
<button type="button" onClick="test()">BACK</button>
<script>
function test() {
parent.mainTest();
}
</script>
All of the below have been tested in confirmation page func and failed.
parent.mainTest();
window.parent.mainTest();
document.parent.mainTest();
parent.document.getElementById('iframe1_id').src = "iframeTest.php";
window.parent.frames["iframe1"]
Script on main.html:
<script>
function test (){
alert("Worked");
}
</script>
<iframe src="products.php" id="iframe1_id" name="iframe1"></iframe>

I want to change the main content dynamically with javascript instead of individual pages

My website is currently using .tpl template files to load different pages dynamically. That will load an entire page again, so header, sidebar (chat), main content and the footer.
In my index.php file there is a switch case which loads the page 'home' when you click on 'home' in the menu. (example)
But I don't want that. Because their is also a chat in the sidebar, and that reloads/resets eveytime you load a different page. So all previous messages will be gone. So what I do want is changing only the main content part. So header, sidebar and footer will stay and won't reload.
I tried to do it with javascript but that didn't work...
Can someone help me or atleast put me on the right path?
(And yes, I have been searching for the last hour on stackoverflow and google but couldn't find anything...)
What you need is called AJAX(With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.)
To use ajax u need Javascript to send the request to a PHP file that loads the smarty template that contains your main content and insert the html code back into the page:
<?php
//some-php-file.php
include("Smarty.class.php");
$smarty = new Smarty;
$smarty->display("main_content_part.tpl");
?>
//link on 'home' site
Home
//javascript(jquery) ajax request
$('#ajaxHomeBtn').click(function(e){
e.preventDefault();
$.get("some-php-file.php", function(smarty_html_data) {
$(".main-content").html(smarty_html_data);
});
});
Please follow following instruction :
Create separate .tpl file for header,footer,sidebar and contents files.
In main file include header,footer,sidebar and left one section for content.
3.Replace your .tpl (using id or class) file content using ajax call.
bind your url with function.
Sample code as below:
// sidebar.php
<ul>
<li><a onclick="changePage(this)" data-page="home.tpl">Home</a></li>
<li><a onclick="changePage(this)" data-page="aboutus.tpl">About Us</a></li>
</ul>
// master.php
<?php
include("header.php");
include("sidebar.php");
?>
<section id="fileContent">
</section>
<?php include("footer.php");
?>
<script href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function changePage(obj)
{
var Filename=$(obj).data('page')
$.get(Filename, function( data ) {
$( "#fileContent" ).html(data);
});
}
</script>

Jquery load url underground

I have this code
<div class="wrap-box-video" id="31">
<div class="addfav">
</div>
<img src="/etc.jpg" />
</div>
and with this code
$(document).ready(function(){
$("div.addfav").click(function(e){
window.location = "?wpfpaction=add&postid=" + $(this).parents(".wrap-box-video").attr("id");
});
});
i want to load the ?wpfpaction=add&postid=31 (in this exemple) but not to show in the url tab i want this to be underground. if i'm on exemple.com page and i click the addfav div i want the exemple.com to be the same but the script to work.
If you're talking about changing what text appears in the browser tab, you can alter the title element of the HTML rendered at you ?wpfaction endpoint.
If you want to change what the actual URL that appears in the URL bar, see Modify the URL without reloading the page

How to call LinkedIn authorize javascript from button

This line of sample code from LinkedIn API works perfectly.
<script type="IN/Login" data-onAuth="loadData"></script>
but it runs automatically as the web page loads. I'd like to invoke this script using a button or link on a webpage. The idea being that the webpage loads and waits until the user is ready to authenticate.
Ideally I would like the LinkedIn Login image to appear, and wait, until clicked.
Thanks.
Based on your comment, it looks like you only want to display the SignIn plugin if the user has manually clicked a button/element on the page. Something like this, using jQuery, should work:
On your page, you have a button:
<div id="buttonControl">
<input type="button" id="showLinkedIn" value="Show LinkedIn" onclick="showLinkedIn();" />
</div>
<div id="buttonContent" style="display: none;"></div>
In a script block in the <head> of the page, you have the showLinkedIn() onclick function:
function showLinkedIn() {
// insert the SignIn plugin
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"><\/script>');
// tell the LinkedIn JavaScript code to re-parse the element containing the SignIn plugin
IN.parse($('#buttonContent')[0]);
// hide button trigger, if needed
$('#buttonControl').hide();
// show the LinkedIn control
$('#buttonContent').show();
}
$('#buttonControl').click(function(){
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"></script>');
$('#buttonControl,#buttonContent').toggle();
IN.User.authorize(loadData);
});
slightly different as the 'IN.parse($('#buttonContent')[0]);' does not seem to work...
tested 'IN.User.authorize(loadData)' and it works well! Got it from: http://developer.linkedin.com/documents/inauth-inevent-and-inui
You need to clear the cookies from the following method like
IN.User.logout(callbackFunction, callbackScope);
You need to call this function on that button from which you want to log out.
Example using jquery:
$('#demo') .click(function()
{
IN.User.logout(console.log("logged out..."));
});

Categories