Inserting html code from one page, into another html page

Question

I am a bit new to web based material so please bear with me.

I have two html pages on my local drive. Test1.html and test2.html.

How could I take test2.html's contents and place them into test1.html's body?

I have looked into using w3IncludeHTML(); along with things like jQuery .load()

Test1.html

<!DOCTYPE html>
<html>
    <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
    <p id="text"></p>

    <script type="text/javascript">
    $('#text').load("test2.html");
    </script>

    </body>
</html>

Test2.html

<ul class='myclass'>
    <li>test li one</li>
    <li>test li two</li>
    <li>test li three</li>
</ul>

If you include the jQuery library before your script your code should work if you change test2.txt to test2.html — mplungjan, Dec 27 '16 at 15:04
along with what @mplungjan said, you need the correct name of the file in `.load()` — Cfreak, Dec 27 '16 at 15:05
`$('#text').load("test2.txt");` and you state `Test2.html` which one is it? This is a typo question; the code works. — Funk Forty Niner, Dec 27 '16 at 15:09
@Fred-ii- It is .html. Sorry. I forgot to change back the extension during testing. — Brad, Dec 27 '16 at 15:11
@mplungjan wouldn't this only work within a server and not my local pc alone? — Brad, Dec 27 '16 at 15:12
........it works locally as `file:///` - look at your console. — Funk Forty Niner, Dec 27 '16 at 15:13
@Fred-ii- I have attempted that and it seems to still not work. I kept researching and found "You can't load a file from your local filesystem, like this, you need to put it on a a web server and load it from there. On the same site as you have the JavaScript loaded from." Have you testing File:/// and got it to work yourself in my scenario locally? — Brad, Dec 27 '16 at 15:22
*"You can't load a file from your local filesystem, like this"* - that's kind of a crock. This is probably just a local issue that your browser has a setting's issue and/or a plugin preventing the file from loading/script from executing or your OS. The only way that I can see from where that comment comes from, would be if the script read as `script type="text/javascript" src="//ajax.googleapis.com/`. - what's that url that said that? — Funk Forty Niner, Dec 27 '16 at 15:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131606/discussion-between-brandon-and-fred-ii). — Brad, Dec 27 '16 at 15:25
BTW, in jQuery, you should wrap your code in `$(function() {` ... `});` otherwise it might execute before the browser's DOM is ready for it, — John Hascall, Dec 27 '16 at 15:31
@JohnHascall the code is after the `
` that contains it so it is existing in th DOM at execution time — mplungjan, Dec 27 '16 at 17:32

score 1 · Accepted Answer · edited Jan 18 '21 at 12:37

1

As per our chat:

https://chat.stackoverflow.com/rooms/131606/discussion-between-brandon-and-fred-ii

You need to run this as an admin, since this is a permissions issue under Windows 7.

edited Jan 18 '21 at 12:37

Community

1
1

answered Dec 27 '16 at 15:55

Funk Forty Niner

74,450
15
68
141

score 0 · Answer 2 · answered Dec 27 '16 at 15:48

0

I would try the jquery/ajax approach:

Test1.html

    <!DOCTYPE html>
    <html>
    <head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
    <p id="text"></p>    
</body>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    $.ajax({
        type:'post',
        url:'get_file_contents.php',
        data:'file=Test2',
        success:function(content){
            var content = $.trim(content);
            $('#text').append(content);
        }
    });
    </script>
</html>

This is a sample of "get_file_contents.php"

<?php
    $file=$_POST["file"].".html";
    $file_content=file_get_contents($file);

    echo $file_content;
?>

This example assumes that:

Your web server is running php
all 3 files (Test1.html, Test2.html and get_file_contents.php are in the same folder).

Hope that helped you

answered Dec 27 '16 at 15:48

Theo Orphanos

1,417
1
19
27

This is done locally on the desktop of a pc without a server set in place. – Brad Dec 27 '16 at 15:49
he doesn't want to setup a webserver/php – Funk Forty Niner Dec 27 '16 at 15:51
Without a "server" functionality, you are missing a lot of features... Why don't you setup a server in your pc? http://www.wampserver.com/en/ – Theo Orphanos Dec 27 '16 at 15:53
@Fred-ii- Just saw your reply... Well if "server" is out of the equation, I can't think of something else :( – Theo Orphanos Dec 27 '16 at 15:56
1

@captaintheo it was a permissions issue http://stackoverflow.com/a/41348242/1415724 – Funk Forty Niner Dec 27 '16 at 15:57
@Brandon I have found this answer regarding getting the contents of a file and putting them into a variable... (In my answer, the variable is "content") http://stackoverflow.com/questions/11583271/how-to-load-the-content-of-a-file-into-variable-using-jquery-load-method – Theo Orphanos Dec 27 '16 at 16:00

score -1 · Answer 3 · answered Dec 27 '16 at 15:39

-1

Your browser is preventing this from working because "security". If you open your browser's (JavaScript) Console, you'll no doubt find an error like this:

As you allude to in your comments, the only solution is to run a webserver locally and use an http[s]:// schema.

answered Dec 27 '16 at 15:39

John Hascall

9,176
6
48
72

*"As you allude to in your comments, the only solution is to run a webserver locally and use an http[s]:// schema."* - Not necessarily. This might just be a Windows permissions issue and need to probably run under admin and/or allow it. I will agree it is a permissions issue, but saying that the only solution is to run as a webserver isn't the only solution. – Funk Forty Niner Dec 27 '16 at 15:48
DId you not read the chat's transcript that Brandon and I had? http://chat.stackoverflow.com/rooms/131606/discussion-between-brandon-and-fred-ii He said it himself. If you feel that my answer is wrong and that Brandon was also wrong, then you need to ping him and contest it. – Funk Forty Niner Dec 27 '16 at 18:34
I noticed you deleted your comment that I was responding to John. It disappeared soon as I posted my comment to you up there. – Funk Forty Niner Dec 27 '16 at 18:34

Inserting html code from one page, into another html page

3 Answers3