div innerhtml对象访问父HTML div

Question

I have a main.html containing the following div:

<div id="main">

I want to dynamically load html in this div (say page1.html and page2.html ). I am able to accomplish this through the following code :

document.getElementById("main").innerHTML='<object type="text/html" data="page1.html" ></object>';

Now, I want to have a button id="btn1" in my page1.html , which should load page2.html into div "main" of my parent main.html . However, in page1.html, I am not able to locate my container div "main"

document.getElementById("main") // returns null

Thanks in advance for the help!

Answer 1

Your issue is trying to use a single page's DOM to interact with content loaded in through an iframe or object . Using these makes life very difficult for a JavaScript developer.

If you are using only plain JavaScript, I would suggest you instead use an AJAX request to load in HTML directly through the DOM instead of transcluding this content using old methods.

Here's a beginner's guide to plain-JS AJAX. Frameworks like jQuery simplify the process immensely.
http://code.tutsplus.com/articles/how-to-make-ajax-requests-with-raw-javascript--net-4855

Otherwise, no. You cannot access that node's content because of Cross-Site Scripting security features.